Focus Input Box On Load Focus Input Box On Load javascript javascript

Focus Input Box On Load


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>


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.


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