Focus Input Box On Load

Question

How can the cursor be focus on a specific input box on page load?

Is it posible to retain initial text value as well and place cursor at end of input?

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />

score 208 · Accepted Answer · edited May 23 '17 at 11:55

There are two parts to your question.

1) How to focus an input on page load?

You can just add the autofocus attribute to the input.

<input id="myinputbox" type="text" autofocus>

However, this might not be supported in all browsers, so we can use javascript.

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

2) How to place cursor at the end of the input text?

Here's a non-jQuery solution with some borrowed code from another SO answer.

function placeCursorAtEnd() {
  if (this.setSelectionRange) {
    // Double the length because Opera is inconsistent about 
    // whether a carriage return is one character or two.
    var len = this.value.length * 2;
    this.setSelectionRange(len, len);
  } else {
    // This might work for browsers without setSelectionRange support.
    this.value = this.value;
  }

  if (this.nodeName === "TEXTAREA") {
    // This will scroll a textarea to the bottom if needed
    this.scrollTop = 999999;
  }
};

window.onload = function() {
  var input = document.getElementById("myinputbox");

  if (obj.addEventListener) {
    obj.addEventListener("focus", placeCursorAtEnd, false);
  } else if (obj.attachEvent) {
    obj.attachEvent('onfocus', placeCursorAtEnd);
  }

  input.focus();
}

Here's an example of how I would accomplish this with jQuery.

<input type="text" autofocus>

<script>
$(function() {
  $("[autofocus]").on("focus", function() {
    if (this.setSelectionRange) {
      var len = this.value.length * 2;
      this.setSelectionRange(len, len);
    } else {
      this.value = this.value;
    }
    this.scrollTop = 999999;
  }).focus();
});
</script>

The first code block suggested actually places the cursor at the end of the existing value as well, it works good. I apreciate your help. — Codex73, Dec 02 '10 at 12:47
The Javascript version is very good, works flawless for iframe with autofocus issues. Also lightweight and compact. +1 as it helped me. — easleyfixed, Dec 30 '21 at 14:50

David Calhoun · Answer 2 · 2014-10-22T22:48:46.327

56

Just a heads up - you can now do this with HTML5 without JavaScript for browsers that support it:

<input type="text" autofocus>

You probably want to start with this and build onto it with JavaScript to provide a fallback for older browsers.

edited Oct 22 '14 at 22:48

answered Dec 02 '10 at 02:16

David Calhoun

8,315
4
30
23

Nice to know that, does this already moves the cursor to the last position in the input field? – Camilo Díaz Repka Dec 02 '10 at 02:18
1

I don't think that @Codex73 is trying to accomplish what the placeholder attribute in HTML5 does. It sounds like he wants the cursor to be automatically positioned at the end of whatever value is currently in the input. – jessegavin Dec 02 '10 at 02:24
2

You're right, this isn't a complete solution. But this does solve a couple of things (onload autofocus and placeholder text). – David Calhoun Dec 02 '10 at 03:06
Note that as of 1/2019, Safari on iOS does not support this: https://caniuse.com/#feat=autofocus – sporker Jan 10 '19 at 18:42

score 12 · Answer 3 · edited Sep 02 '15 at 22:00

12

$(document).ready(function() {
    $('#id').focus();
});

edited Sep 02 '15 at 22:00

Jeremy Cook

20,840
9
71
77

answered Oct 10 '13 at 09:16

Nasruddin

1,640
14
20

1

This requires jQuery. – Tom Pohl Jun 11 '14 at 06:33
1

Yeah you need to include jQuery libs :) – Nasruddin Jun 11 '14 at 07:33
1

classic stackoverflow :) – Florian F Mar 28 '20 at 19:23

score 3 · Answer 4 · edited May 17 '19 at 04:04

3

function focusOnMyInputBox(){                                 
    document.getElementById("myinputbox").focus();
}

<body onLoad="focusOnMyInputBox();">

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text">

edited May 17 '19 at 04:04

ravibagul91

20,072
5
36
59

answered Dec 02 '10 at 02:15

Sujith Surendranathan

2,569
17
21

score 2 · Answer 5 · edited May 23 '17 at 12:26

2

A portable way of doing this is using a custom function (to handle browser differences) like this one.

Then setup a handler for the onload at the end of your <body> tag, as jessegavin wrote:

window.onload = function() {
  document.getElementById("myinputbox").focus();
}

edited May 23 '17 at 12:26

Community

1
1

answered Dec 02 '10 at 02:15

Camilo Díaz Repka

4,805
5
43
68

score 2 · Answer 6 · answered May 17 '19 at 01:35

2

very simple one line solution:

<body onLoad="document.getElementById('myinputbox').focus();">

answered May 17 '19 at 01:35

kavi

539
4
11

score 1 · Answer 7 · answered Apr 14 '16 at 09:59

1

Working fine...

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

answered Apr 14 '16 at 09:59

Mohammed Javed

866
2
9
24

score 1 · Answer 8 · answered Nov 21 '17 at 10:55

1

Try:

Javascript Pure:

[elem][n].style.visibility='visible';
[elem][n].focus();

Jquery:

[elem].filter(':visible').focus();

answered Nov 21 '17 at 10:55

KingRider

2,140
25
23

score 0 · Answer 9 · answered Aug 18 '14 at 22:52

This is what works fine for me:

<form name="f" action="/search">
    <input name="q" onfocus="fff=1" />
</form>

fff will be a global variable which name is absolutely irrelevant and which aim will be to stop the generic onload event to force focus in that input.

<body onload="if(!this.fff)document.f.q.focus();">
    <!-- ... the rest of the page ... -->
</body>

From: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html

score 0 · Answer 10 · edited Aug 22 '14 at 14:29

0

If you can't add to the BODY tag for some reason, you can add this AFTER the Form:

<SCRIPT type="text/javascript">
    document.yourFormName.yourFieldName.focus();
</SCRIPT>

edited Aug 22 '14 at 14:29

brasofilo

25,496
15
91
179

answered Aug 22 '14 at 14:04

Zardiw

11
10

Marty · Answer 11 · 2019-11-26T18:30:03.807

0

Add this to the top of your js

var input = $('#myinputbox');

input.focus();

Or to html

<script>
    var input = $('#myinputbox');

    input.focus();
</script>

edited Nov 26 '19 at 18:30

answered Nov 26 '19 at 18:18

Marty

71
5

Focus Input Box On Load

11 Answers11

Linked

Related