[javascript] how to auto select an input field and the text in it on page load

Upon page load I want to move the cursor to a particular field. No problem. But I also need to select and highlight the default value that is placed in that text field.

This question is related to javascript html

The answer is


try this. this will work on both Firefox and chrome.

<input type="text" value="test" autofocus="autofocus" onfocus="this.select()">


In your input tag, place the following:

onFocus="this.select()"

_x000D_
_x000D_
    var input = document.getElementById('myTextInput');_x000D_
    input.focus();_x000D_
    input.setSelectionRange( 6,  19 );
_x000D_
    <input id="myTextInput" value="Hello default value world!" />
_x000D_
_x000D_
_x000D_

select particular text on textfield

Also you can use like

input.selectionStart = 6;
input.selectionEnd = 19;

Using the autofocus attribute works well with text input and checkboxes.

<input type="text" name="foo" value="boo" autofocus="autofocus"> FooBoo
<input type="checkbox" name="foo" value="boo" autofocus="autofocus"> FooBoo

_x000D_
_x000D_
    var input = document.getElementById('myTextInput');_x000D_
    input.focus();_x000D_
    input.setSelectionRange( 6,  19 );
_x000D_
    <input id="myTextInput" value="Hello default value world!" />
_x000D_
_x000D_
_x000D_

select particular text on textfield

Also you can use like

input.selectionStart = 6;
input.selectionEnd = 19;

when using jquery...

html:

<input type='text' value='hello world' id='hello-world-input'>

jquery:

$(function() {
  $('#hello-world-input').focus().select();
});

example: https://jsfiddle.net/seanmcmills/xmh4e0d4/


try this. this will work on both Firefox and chrome.

<input type="text" value="test" autofocus="autofocus" onfocus="this.select()">


I found a very simple method that works well:

<input type="text" onclick="this.focus();this.select()">

Let the input text field automatically get focus when the page loads:

<form action="/action_page.php">
  <input type="text" id="fname" name="fname" autofocus>
  <input type="submit">
</form>

Source : https://www.w3schools.com/tags/att_input_autofocus.asp


To do it on page load:

_x000D_
_x000D_
window.onload = function () {_x000D_
  var input = document.getElementById('myTextInput');_x000D_
  input.focus();_x000D_
  input.select();_x000D_
}
_x000D_
<input id="myTextInput" value="Hello world!" />
_x000D_
_x000D_
_x000D_


Using the autofocus attribute works well with text input and checkboxes.

<input type="text" name="foo" value="boo" autofocus="autofocus"> FooBoo
<input type="checkbox" name="foo" value="boo" autofocus="autofocus"> FooBoo

I found a very simple method that works well:

<input type="text" onclick="this.focus();this.select()">

To do it on page load:

_x000D_
_x000D_
window.onload = function () {_x000D_
  var input = document.getElementById('myTextInput');_x000D_
  input.focus();_x000D_
  input.select();_x000D_
}
_x000D_
<input id="myTextInput" value="Hello world!" />
_x000D_
_x000D_
_x000D_


In your input tag, place the following:

onFocus="this.select()"

To do it on page load:

_x000D_
_x000D_
window.onload = function () {_x000D_
  var input = document.getElementById('myTextInput');_x000D_
  input.focus();_x000D_
  input.select();_x000D_
}
_x000D_
<input id="myTextInput" value="Hello world!" />
_x000D_
_x000D_
_x000D_


when using jquery...

html:

<input type='text' value='hello world' id='hello-world-input'>

jquery:

$(function() {
  $('#hello-world-input').focus().select();
});

example: https://jsfiddle.net/seanmcmills/xmh4e0d4/


Let the input text field automatically get focus when the page loads:

<form action="/action_page.php">
  <input type="text" id="fname" name="fname" autofocus>
  <input type="submit">
</form>

Source : https://www.w3schools.com/tags/att_input_autofocus.asp