How to set cursor to input box in Javascript?

JavascriptDom Events

Javascript Problem Overview


document.getElementById(frmObj.id).value="";
document.getElementById(frmObj.id).autofocus;
document.getElementById("errorMsg").innerHTML = "Only numeric value is allowed";

In the above code the value of the form object is perfectly setting to "" but there is no cursor in the text box. I want a cursor to be there. focus() only focuses that input box but does not actually set the cursor.

Javascript Solutions


Solution 1 - Javascript

In JavaScript first focus on the control and then select the control to display the cursor on texbox...

document.getElementById(frmObj.id).focus();
document.getElementById(frmObj.id).select();

or by using jQuery

$("#textboxID").focus();

Solution 2 - Javascript

I realize that this is quite and old question, but I have a 'stupid' solution to a similar problem which maybe could help someone.

I experienced the same problem with a text box which shown as selected (by the Focus method in JQuery), but did not take the cursor in.

The fact is that I had the Debugger window open to see what is happening and THAT window was stealing the focus. The solution is banally simple: just close the Debugger and everything is fine...1 hour spent in testing!

Solution 3 - Javascript

Sometimes you do get focus but no cursor in a text field. In this case you would do this:

document.getElementById(frmObj.id).select();

Solution 4 - Javascript

One of the things that can bite you is if you are using .onmousedown as your user interaction; when you do that, and then an attempt is immediately made to select a field, it won't happen, because the mouse is being held down on something else. So change to .onmouseup and viola, now focus() works, because the mouse is in an un-clicked state when the attempt to change focus is made.

Solution 5 - Javascript

This way sets the focus and cursor to the end of your input:

div.getElementsByTagName("input")[0].focus();
div.getElementsByTagName("input")[0].setSelectionRange(div.getElementsByTagName("input")[0].value.length,div.getElementsByTagName("input")[0].value.length,"forward");

Solution 6 - Javascript

You have not provided enough code to help You likely submit the form and reload the page OR you have an object on the page like an embedded PDF that steals the focus.

Here is the canonical plain javascript method of validating a form It can be improved with onubtrusive JS which will remove the inline script, but this is the starting point:

function validate(formObj) {
  document.getElementById("errorMsg").innerHTML = "";
  var quantity = formObj.quantity;
  if (isNaN(quantity)) {
    quantity.value = "";
    quantity.focus();
    document.getElementById("errorMsg").innerHTML = "Only numeric value is allowed";
    return false;
  }
  return true; // allow submit
}

#errorMsg { color:red }

<form onsubmit="return validate(this)">
  <input type="text" name="quantity" value="" />
  <input type="submit" />
</form>
<span id="errorMsg"></span>

Solution 7 - Javascript

Inside the input tag you can add autoFocus={true} for anyone using jsx/react.

<input
 type="email"
 name="email"
 onChange={e => setEmail(e.target.value)}
 value={email}
 placeholder={"Email..."}
 autoFocus={true}
/>

Solution 8 - Javascript

In my experience

> document.getElementById(frmObj.id).focus();

is good on a browser running on a PC. But on mobile if you want the keyboard to show up so the user can input directly then you also need:

> document.getElementById(frmObj.id).select();

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionyukti kamraView Question on Stackoverflow
Solution 1 - JavascriptTalhaView Answer on Stackoverflow
Solution 2 - JavascriptOrionisView Answer on Stackoverflow
Solution 3 - JavascriptAlexander PavlovView Answer on Stackoverflow
Solution 4 - JavascriptfyngyrzView Answer on Stackoverflow
Solution 5 - JavascriptBeatEngineView Answer on Stackoverflow
Solution 6 - JavascriptmplungjanView Answer on Stackoverflow
Solution 7 - Javascriptuser9371615View Answer on Stackoverflow
Solution 8 - JavascriptDaniele FolatelliView Answer on Stackoverflow