Possible Duplicate:
Javascript: Move caret to last character
I have a standard textarea with some text in it. I'm looking for a way to have the cursor automatically be placed at the end of the existing text so a user can simply start typing to add more text. This should happen whenever the textarea becomes active such as when a user tabs into it. Any ideas?
To set the cursor at the end of a textarea: Use the setSelectionRange() method to set the current text selection position to the end of the textarea. Call the focus() method on the textarea element. The focus method will move the cursor to the end of the element's value.
I've answered this before: Javascript: Move caret to last character
jsFiddle: http://jsfiddle.net/ghAB9/6/
Code:
<textarea id="test">Some text</textarea>
function moveCaretToEnd(el) {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
el.focus();
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}
var textarea = document.getElementById("test");
textarea.onfocus = function() {
moveCaretToEnd(textarea);
// Work around Chrome's little problem
window.setTimeout(function() {
moveCaretToEnd(textarea);
}, 1);
};
You need to listen to the focus event in the text area for example :
<textarea onfocus="setCursorAtTheEnd(this,event)"/>
And then in your javascript code:
function setCursorAtTheEnd(aTextArea,aEvent) {
var end=aTextArea.value.length;
if (aTextArea.setSelectionRange) {
setTimeout(aTextArea.setSelectionRange,0,[end,end]);
} else { // IE style
var aRange = aTextArea.createTextRange();
aRange.collapse(true);
aRange.moveEnd('character', end);
aRange.moveStart('character', end);
aRange.select();
}
aEvent.preventDefault();
return false;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With