how to auto select an input field and the text in it on page load
JavascriptHtmlJavascript 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();
});
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