[javascript] Focus Input Box On Load

How can the cursor be focus on a specific input box on page load?

Is it posible to retain initial text value as well and place cursor at end of input?

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />

This question is related to javascript html dom xhtml

The answer is


A portable way of doing this is using a custom function (to handle browser differences) like this one.

Then setup a handler for the onload at the end of your <body> tag, as jessegavin wrote:

window.onload = function() {
  document.getElementById("myinputbox").focus();
}

very simple one line solution:

<body onLoad="document.getElementById('myinputbox').focus();">

$(document).ready(function() {
    $('#id').focus();
});

Just a heads up - you can now do this with HTML5 without JavaScript for browsers that support it:

<input type="text" autofocus>

You probably want to start with this and build onto it with JavaScript to provide a fallback for older browsers.


function focusOnMyInputBox(){                                 
    document.getElementById("myinputbox").focus();
}

<body onLoad="focusOnMyInputBox();">

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text">

Try:

Javascript Pure:

[elem][n].style.visibility='visible';
[elem][n].focus();

Jquery:

[elem].filter(':visible').focus();

Add this to the top of your js

var input = $('#myinputbox');

input.focus();

Or to html

<script>
    var input = $('#myinputbox');

    input.focus();
</script>

Working fine...

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

This is what works fine for me:

<form name="f" action="/search">
    <input name="q" onfocus="fff=1" />
</form>

fff will be a global variable which name is absolutely irrelevant and which aim will be to stop the generic onload event to force focus in that input.

<body onload="if(!this.fff)document.f.q.focus();">
    <!-- ... the rest of the page ... -->
</body>

From: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html


If you can't add to the BODY tag for some reason, you can add this AFTER the Form:

<SCRIPT type="text/javascript">
    document.yourFormName.yourFieldName.focus();
</SCRIPT>

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to dom

How do you set the document title in React? How to find if element with specific id exists or not Cannot read property 'style' of undefined -- Uncaught Type Error adding text to an existing text element in javascript via DOM Violation Long running JavaScript task took xx ms How to get `DOM Element` in Angular 2? Angular2, what is the correct way to disable an anchor element? React.js: How to append a component on click? Detect click outside React component DOM element to corresponding vue.js component

Examples related to xhtml

How to refresh table contents in div using jquery/ajax Uses for the '&quot;' entity in HTML The entity name must immediately follow the '&' in the entity reference Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it? How to vertically align a html radio button to it's label? Image height and width not working? Removing border from table cells Enable & Disable a Div and its elements in Javascript how to remove the bold from a headline? How to make div occupy remaining height?