How to Focus on a Form Input Text Field on Page Load Using Jquery

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



Leave a reply



Submit