How to set cursor to input box in Javascript?

Question

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.

`document.getElementById(fieldID).focus();` should put the blinking cursor in the form field unless you have something else that grabs the focus on the page. The statement with .autofocus you have now does nothing — mplungjan, Jun 05 '12 at 09:18
`.focus()` does set cursor. This is the whole meaning of the focus action. — Shadow The GPT Wizard, Jun 05 '12 at 09:20
Future readers: also make sure that the element you are targeting has been added to the DOM. I was creating elements in the script and calling focus() on them before I appended them. Switching the order fixed the issue for me. — Matthew R., Jun 24 '17 at 16:15

score 137 · Accepted Answer · edited Jan 17 '19 at 20:28

137

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();

edited Jan 17 '19 at 20:28

David Morton

16,338
3
63
73

answered Jun 05 '12 at 09:23

Talha

18,898
8
49
66

17

There is no need for the select. There is something else going on with his code. Possibly an embedded PDF or similar – mplungjan Jun 05 '12 at 09:49
1

i want that cursor should be there in textbox. i should not click in textbox to enter value. – yukti kamra Jun 05 '12 at 09:57
In fact, in my case, the select made the code NOT work. You just want the focus(); – Greg Blass Jul 27 '20 at 23:57
Worked for Me with each, With Focus Cursor is placed at end of input and you can start writing from the end with other characters preserved. With select the value inside is also selected. – Gaurav Kumar Nov 10 '21 at 18:06

score 72 · Answer 2 · edited Dec 08 '15 at 10:55

72

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!

edited Dec 08 '15 at 10:55

Toby Speight

27,591
48
66
103

answered Dec 08 '15 at 10:36

Orionis

983
7
11

I was trying to make a `` element focusable and this ended up being the issue (glad I scrolled passed the first accepted answer). I also found that there are [html elements that are not focusable](http://stackoverflow.com/a/1600194/1052906) by default (seems to be browser-specific). The `` element is one of those elements which is why Chrome (Version 57) gave focus to the developer tools window. – larrylampco May 12 '17 at 03:51
This comments saved me minutes rather than hours! – user1503941 Oct 21 '20 at 15:23
1

Unfortunately closing the developer console does not help. The `.focus()` is called correctly, but the element does not get the desired focus. Most likely something changed in newer browsers. Anyways, thanks for sharing your idea! – sirko Jul 25 '22 at 22:59

score 8 · Answer 3 · answered Jun 05 '12 at 09:22

8

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

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

answered Jun 05 '12 at 09:22

Alexander Pavlov

31,598
5
67
93

Yes, this is correct sometime when there is a transition .focus() will not work you will have to use $("element")[0].select() in order to get the cursor – Imal Hasaranga Perera Jun 20 '15 at 18:37
2

or el.setSelectionRange(el.value.length, el.value.length); to get the cursor at the end of the line. – Vector May 19 '17 at 15:18
Note : `setSelectionRange` would NOT work on `` – Vandesh Aug 05 '17 at 18:44

score 6 · Answer 4 · answered Jan 31 '16 at 01:00

6

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.

answered Jan 31 '16 at 01:00

fyngyrz

2,458
2
36
43

1

I know this is an old question, but this answer definitely deserves recognition. Couldn't find anyone else that mentioned this. Thank you – Kevin Montambault Feb 15 '21 at 04:48

score 4 · Answer 5 · answered Oct 18 '19 at 06:25

4

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");

answered Oct 18 '19 at 06:25

BeatEngine

123
7

Work perfectly, but I think the code should be like this `document.getElementsByTagName("input")[0].focus();` – Salem May 15 '22 at 03:57

score 3 · Answer 6 · answered Dec 06 '20 at 14:35

3

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}
/>

answered Dec 06 '20 at 14:35

user9371615

69
5

score 1 · Answer 7 · edited Aug 26 '21 at 21:08

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>

score 0 · Answer 8 · answered Oct 07 '20 at 12:22

0

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();

answered Oct 07 '20 at 12:22

Daniele Folatelli

31
2

How to set cursor to input box in Javascript?

8 Answers8

Linked