Menu
Sometimes all you have to do to make sure the cursor is inside the text box is: click on the text box and when a menu is displayed, click on "Format text box" then click on the "text box" tab and finally modify all four margins (left, right, upper and bottom) by arrowing down until "0" appear on each margin.
The autofocus attribute is a boolean attribute. When present, it specifies that an <input> element should automatically get focus when the page loads.
Input Text focus() MethodThe focus() method is used to give focus to a text field. Tip: Use the blur() method to remove focus from a text field.
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.
In HTML there's an autofocus attribute to all form fields. There's a good tutorial on it in Dive Into HTML 5. Unfortunately it's currently not supported by IE versions less than 10.
To use the HTML 5 attribute and fall back to a JS option:
<input id="my-input" autofocus="autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>
No jQuery, onload or event handlers are required, because the JS is below the HTML element.
Edit: another advantage is that it works with JavaScript off in some browsers and you can remove the JavaScript when you don't want to support older browsers.
Edit 2: Firefox 4 now supports the autofocus attribute, just leaving IE without support.
You need to use javascript:
<BODY onLoad="document.getElementById('myButton').focus();">
@Ben notes that you should not add event handlers like this. While that is another question, he recommends that you use this function:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
And then put a call to addLoadEvent on your page and reference a function the sets the focus to you desired textbox.
Simply write autofocus in the textfield. This is simple and it works like this:
<input name="abc" autofocus></input>
Hope this helps.
You can do it easily by using jquery in this way:
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>
by calling this function in $(document).ready().
It means this function will execute when the DOM is ready.
For more information about the READY function, refer to : http://api.jquery.com/ready/
Using plain vanilla html and javascript
<input type='text' id='txtMyInputBox' />
<script language='javascript' type='text/javascript'>
function SetFocus()
{
// safety check, make sure its a post 1999 browser
if (!document.getElementById)
{
return;
}
var txtMyInputBoxElement = document.getElementById("txtMyInputBox");
if (txtMyInputBoxElement != null)
{
txtMyInputBoxElement.focus();
}
}
SetFocus();
</script>
For those out there using the .net framework and asp.net 2.0 or above, its trivial. If you are using older versions of the framework, you'd need to write some javascript similar to above.
In your OnLoad handler (generally page_load if you are using the stock page template supplied with visual studio) you can use:
C#
protected void PageLoad(object sender, EventArgs e)
{
Page.SetFocus(txtMyInputBox);
}
VB.NET
Protected Sub PageLoad(sender as Object, e as EventArgs)
Page.SetFocus(txtMyInputBox)
End Sub
(* Note I removed the underscore character from the function name that is generally Page_Load since in a code block it refused to render properly! I could not see in the markup documentation how to get underscores to render unescaped.)
Hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With