Javascript to Put Mouse Cursor in Input Element Text or TextArea
Lets say you have a form with a form validation code that notifies the web page visitor that the form can't be submit because the user forgot to type something in one of the input fields like a textbox or textarea. An alert message to notfify them of this is great but even better is putting the mouse cursor IN that textbox or textarea so there is little confusion about what information they forgot to supply.
Note: this Javascript code is effective if there is no text in the textbox or textarea. If there is text, the textbox will get the cursor but the text will get selected as well.
Three short lines of javascript code:
1:
2:
3:
4:
var varInpBox = document.getElementById('IdOfTheTextboxOrTextArea'); // get programatic handle to the textbox or textarea
varInpBox.focus; // set focus to the textbox/textarea
varInpBox.setActive; // make the textbox/textarea the one that is going to receive mouse and keyboard input
varInpBox.select(); // some browsers require this line of code for it to work right
Live Demo of JS Putting Cursor in Input Element.
That's it! Many web pages I have view when searching 'how to put cursor in textbox' tell you to use one the code varInpBox.focus;. Not enough. This alone may work in some browser in certain circumstances but the second two lines of code varInpBox.setActive; and varInpBox.select(); is the finishing touch that ensures the code works properly and (almost) all the time in all browsers and devices.
Javascript to Put Cursor at a SPECIFIC Position in Input Textbox or TextArea
The above code successfully puts the cursor in the input element through sheer Javascript code but does not let you specify at what position. If there is nothing in the input element then this is not an issue or an option but if there is text, here is the code required to put the cursor in the input element at any position you wish. The code is a LITTLE more involved than the above but not much.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
function setCaretPosition(ctrl, pos) {
// For Most Web Browsers
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
// IE8 and below
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
Live Demo of JS Cursor in Input at SPECIFIC POSITION.
Javascript to Put Mouse Cursor in Input Textbox or Textarea at the END of Text
The Javascript code to put the cursor in a textbox or textarea, that contains text, and put the cursor at the END of the text only requires a slight modification to the Javascript code.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
function setCaretPosEnd(ctrl) {
var varCtlLen = ctrl.value.length;
// For Most Web Browsers
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(varCtlLen, varCtlLen);
// IE8 and below
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', varCtlLen);
range.moveStart('character', varCtlLen);
range.select();
}
}
Live Demo of JS Cursor in Input at END.
Javascript to Put Cursor at BEGINNING of Input Text or TextArea
The javascript code to put the cursor in a textbox or textarea at the beginning is pretty much identical to the code above with the difference of just specifying the position variable of 0. The following code will put the cursor at the beginning, even if the Textbox or TextArea already has text in it.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
function setCaretPosStart(ctrl) {
// For Most Web Browsers
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(0, 0);
// IE8 and below
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', 0);
range.moveStart('character', 0);
range.select();
}
}
Live Demo of JS Cursor in Input at BEGINNING.
