CODEWITHSUNDEEP
javascripthtmlinputdom-events
Jabey
Jabey

Reputation: 177

Javascript focus on input box on load

No matter what I do, this page doesn't work at all. I want it to focus on the input box on load.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Screen</title>
<style type="text/css">
input {border:0px;}
input:focus {outline:none;}
</style>
</head>
<body onload="document.getElementById("search").focus()">
<input id="search" />
</body>
</html>

I know I'm breaking a bunch of rules with this code, so you don't need to say anything about that.

EDIT:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Screen</title>
<style type="text/css">
input {border:0px;}
input:focus {outline:none;}
</style>
</head>
<body onload="document.getElementById('search').focus()">
<input id="search" onblur="setTimeout(document.getElementById('search').focus(),10)" />
</body>
</html>

EDIT 2:

<script type="text/javascript">
function refocus()
{
setTimeout(document.getElementById("search").focus(),10);
}
</script>

<input id="search" onblur="refocus()" />

Upvotes: 2

Views: 14657

Answers (6)

Rubi saini
Rubi saini

Reputation: 2535

Set some delay in your code by using setTimeout function to resolve this problem.

function fireOnClick() {
    // Set text filed focus after some delay
    setTimeout(function() { jQuery('#globalText').focus() }, 20);
    // Do your work.....
}

Upvotes: 0

Null Pointer
Null Pointer

Reputation: 56

Double quotes cannot include double quotes,not only in javascript,any other language is the same.

<body onload="document.getElementById('search').focus()">

Upvotes: 4

Daniel Imms
Daniel Imms

Reputation: 50149

Your experiencing this issue because you're using the same quotes inside the onfocus event, you can change "search" to 'search' to fix the issue.

<body onload="document.getElementById('search').focus()">

Ideally though, you should attach your events in JavaScript so your markup stays clear and all functional aspects of the page are located in one place.

jsFiddle

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("search").focus();
    }
</script>

Upvotes: 0

scrblnrd3
scrblnrd3

Reputation: 7416

Put search in single quotes, since you have double quotes around the document.getelementbyid

 <body onload="document.getElementById('search').focus()">

Upvotes: 0

Joan Caron
Joan Caron

Reputation: 1970

I'f you're using jquery:

$(function() {
  $("#search").focus();
});

or prototype:

Event.observe(window, 'load', function() {
  $("search").focus();
});

or plain javascript:

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

It's "Better" for readability than an inline event...

Upvotes: 2

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

You have to put search into single quotes:

<body onload="document.getElementById('search').focus()">

Upvotes: 0

Related Questions