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

JavascriptHtml

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

From http://www.codeave.com/javascript/code.asp?u_log=7004:

var input = document.getElementById('myTextInput');
input.focus();
input.select();

<input id="myTextInput" value="Hello world!" />

Solution 2 - Javascript

In your input tag, place the following:

onFocus="this.select()"

Solution 3 - Javascript

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

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

Solution 4 - Javascript

To do it on page load:

window.onload = function () {
  var input = document.getElementById('myTextInput');
  input.focus();
  input.select();
}

<input id="myTextInput" value="Hello world!" />

Solution 5 - Javascript

I found a very simple method that works well:

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

Solution 6 - Javascript

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/

Solution 7 - Javascript

In your input tag use autofocus like this

<input type="text" autofocus>

Solution 8 - Javascript

    var input = document.getElementById('myTextInput');
    input.focus();
    input.setSelectionRange( 6,  19 );

    <input id="myTextInput" value="Hello default value world!" />

select particular text on textfield

Also you can use like

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

Solution 9 - Javascript

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

Solution 10 - Javascript

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

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
QuestionderickView Question on Stackoverflow
Solution 1 - JavascriptJohn MillikinView Answer on Stackoverflow
Solution 2 - JavascriptdvoView Answer on Stackoverflow
Solution 3 - JavascriptVivek abView Answer on Stackoverflow
Solution 4 - JavascriptroenvingView Answer on Stackoverflow
Solution 5 - JavascriptpedalGeoffView Answer on Stackoverflow
Solution 6 - JavascriptSean MView Answer on Stackoverflow
Solution 7 - Javascriptuser15786743View Answer on Stackoverflow
Solution 8 - JavascriptparanjothiView Answer on Stackoverflow
Solution 9 - JavascriptM. IvanovView Answer on Stackoverflow
Solution 10 - JavascriptlifeaeView Answer on Stackoverflow