How to Automatically Set the Focus to a Textbox When a Web Page Loads

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.

Setting focus on a text box on page load

You have to do like...

document.getElementById('<%= tbSearchLastName.ClientID%>').focus();

Setting focus on an HTML input box on page load

This line:

<input type="password" name="PasswordInput"/>

should have an id attribute, like so:

<input type="password" name="PasswordInput" id="PasswordInput"/>

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>

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.

Set focus to textbox in ASP.NET Login control on page load

Are you using a ScriptManager on the Page? If so, try the following:

public void SetInputFocus()
{
TextBox tbox = this.loginForm.FindControl("UserName") as TextBox;
if (tbox != null)
{
ScriptManager.GetCurrent(this.Page).SetFocus(tbox);
}
}

Update: Never used a multiview before, but try this:

protected void MultiView1_ActiveViewChanged(object sender, EventArgs e)
{
SetInputFocus();
}


Related Topics



Leave a reply



Submit