How to focus on a form input text field on page load using jQuery?
Set focus on the first text field:
$("input:text:visible:first").focus();
This also does the first text field, but you can change the [0] to another index:
$('input[@type="text"]')[0].focus();
Or, you can use the ID:
$("#someTextBox").focus();
auto focus input text box in form on page load in jquery
$(document).ready(function() {
var ele = $('input').filter(':visible:first');
if (ele.val() != "") {
ele.parents('.form-group').next().find('.col-md-
6').children().trigger('focus');
}
});
Please try this one.
Setting focus on input field on page load (so the user can start typing) in jQuery
1.Need to add jQuery library
2.You forgot #
in jQuery code.(As it need to be selector)
<input type="text" placeholder="Search.." id="searchField">
<button type="submit" id="searchButton">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$("#searchField").focus()
});
working snippet:-
$(document).ready(function() { $("#searchField").focus() });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Search.." id="searchField"><button type="submit" id="searchButton">Submit</button>
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>
Jquery - Focus on an input field in a form on pageload?
It does work in the following simple example. Therefore there is something else going on on your page that causes the input to lose focus. I suggest using setTimeout to set the focus.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#Username').focus();
});
</script>
</head>
<body>
<input id="Username" />
</body>
</html>
How to make focus on input field on page load
You just need to add class in fieldset on page load. you can do with one single line code.
$("input:text:visible:first").closest('form fieldset').addClass('is-focused');
You can also refer jsfiddle url here
How do you automatically set the focus to a textbox when a web page loads?
If you're using jquery:
$(function() {
$("#Box1").focus();
});
or prototype:
Event.observe(window, 'load', function() {
$("Box1").focus();
});
or plain javascript:
window.onload = function() {
document.getElementById("Box1").focus();
};
though keep in mind that this will replace other on load handlers, so look up addLoadEvent() in google for a safe way to append onload handlers rather than replacing.
Related Topics
Count Number of Matches of a Regex in JavaScript
Javascript/Jquery: Test If Window Has Focus
How to Display Data Values on Chart.Js
JavaScript Sort Function. Sort by First Then by Second
How to Insert a Character After Every N Characters in JavaScript
Date VS New Date in JavaScript
Rails 4 Turbo-Link Prevents Jquery Scripts from Working
Why Is My Onclick Being Called on Render? - React.Js
What the Difference of This.State and This.Setstate in Reactjs
How to Check If Page Exists Using JavaScript
How to Remove One Specific Selected File from Input File Control
Why Array.Indexof Doesn't Find Identical Looking Objects
Adding a New Array Element to a JSON Object
Jquery Post() with Serialize and Extra Data
Uncaught Typeerror: Cannot Read Property 'Msie' of Undefined - Jquery Tools
Localstorage Access from Local File
How to Detect If Flash Is Installed and If Not, Display a Hidden Div That Informs the User