•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 429,778 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,919 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 16208 | Replies: 4
 |
•
•
Join Date: Dec 2004
Posts: 9
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Cursor control in text boxes: I have a form with several text boxes.
The onblur handler for each calls a function, and so does the onfocus handler. Both the functions alter the display.
When I am in one text box and click into another, it appears (from using alert boxes to track the results) that browsers PROCESS the onblur first, then the onfocus, but then DISPLAY the onfocus changes and finally display the changes dictated by the onblur.
The onfocus may find text already in the box, and when it does it places the cursor at the end of the text.
But then the browser does the onblur screen-changes and when it returns focus to the new text box the cursor is in the leftmost position.
Does anyone know how I can position the cursor in that text box so it appears in the position following the last byte of whatever text is already entered (thus enabling the user to continue typing)?
The onblur handler for each calls a function, and so does the onfocus handler. Both the functions alter the display.
When I am in one text box and click into another, it appears (from using alert boxes to track the results) that browsers PROCESS the onblur first, then the onfocus, but then DISPLAY the onfocus changes and finally display the changes dictated by the onblur.
The onfocus may find text already in the box, and when it does it places the cursor at the end of the text.
But then the browser does the onblur screen-changes and when it returns focus to the new text box the cursor is in the leftmost position.
Does anyone know how I can position the cursor in that text box so it appears in the position following the last byte of whatever text is already entered (thus enabling the user to continue typing)?
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 35
This code is Internet Explorer ONLY. The object/method is "createTextRange".
The JavaScript function might look like:
And you call it:
What this will do is move the cursor to the END of the current value of the textbox.
The JavaScript function might look like:
function setCursorPos( x ) {
var txtRange = x.createTextRange();
txtRange.moveStart( "character", x.value.length - 2 );
txtRange.moveEnd( "character", 0 );
txtRange.select();
}And you call it:
<form >
<input type="text" onfocus="setCursorPos(this);" />
</form>What this will do is move the cursor to the END of the current value of the textbox.
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 35
Did this work? Do you need more help? Please give us some feedback.
•
•
Join Date: Dec 2004
Posts: 1
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Re: Cursor control in text boxes: Hi,
I use this:
and it works well with any web browser...
Maybe it could help you!
Henry, en français dans le texte
I use this:
<TEXTAREA NAME="txt" onfocus='this.value=this.value;'>
and it works well with any web browser...
Maybe it could help you!
Henry, en français dans le texte
•
•
Join Date: Dec 2004
Posts: 9
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
I apologize for not replying sooner.
When I first tried the suggestions above, Henry's didn't work at all (and still doesn't.) The snippet below:
This is the text-box:
<input type="text" size=8 value="" id="A" onfocus="this.value=this.value">
DOES put the cursor at the end BRIEFLY on re-Focus, but then it jumps back to the start. (Interestingly, inserting an "alert()" at the end of the onFocus handler LEAVES the cursor at the end when the alert box is closed - but of course I don't want an alert everytime the user returns to a text-box.
tgreer's IE-specific function "setCursorPos(x)" didn't work when I tried it either (on re-focus it highlighted the last two bytes of the text in the box) and although I questioned why the .moveStart had a -2 in its second argument, I was by then working on the CONTENT part of my project and so chose neither to try to debug the function nor to reply that it didn't work (since my attention was then elsewhere and I didn't want to continue a thread that might not lead to a solution.)
But now I've returned to the text-box problem, and by removing the -2 in .moveStart's second argument I find that it works fine.
So I'm posting now to say "Thanks, tgreer!" I've acknowledged your contribution via a comment line in my source code for the script.
When I first tried the suggestions above, Henry's didn't work at all (and still doesn't.) The snippet below:
This is the text-box:
<input type="text" size=8 value="" id="A" onfocus="this.value=this.value">
DOES put the cursor at the end BRIEFLY on re-Focus, but then it jumps back to the start. (Interestingly, inserting an "alert()" at the end of the onFocus handler LEAVES the cursor at the end when the alert box is closed - but of course I don't want an alert everytime the user returns to a text-box.
tgreer's IE-specific function "setCursorPos(x)" didn't work when I tried it either (on re-focus it highlighted the last two bytes of the text in the box) and although I questioned why the .moveStart had a -2 in its second argument, I was by then working on the CONTENT part of my project and so chose neither to try to debug the function nor to reply that it didn't work (since my attention was then elsewhere and I didn't want to continue a thread that might not lead to a solution.)
But now I've returned to the text-box problem, and by removing the -2 in .moveStart's second argument I find that it works fine.
So I'm posting now to say "Thanks, tgreer!" I've acknowledged your contribution via a comment line in my source code for the script.
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Clearing Text Boxes (VB.NET)
- Adding the results of two text boxes (Visual Basic Express Edition) (VB.NET)
- The Datagrid: How does one fill text boxes in edit mode with their original content? (ASP.NET)
- link text boxes with listbox (VB.NET)
Other Threads in the HTML and CSS Forum
- Previous Thread: Trying to adjust image width to match browser size
- Next Thread: Trigger onChange manually
