Javascript专注于加载输入框答案

【问题标题】：Javascript focus on input box on loadJavascript专注于加载输入框
【发布时间】：2013-03-28 01:11:43
【问题描述】：

无论我做什么，这个页面都无法正常工作。我希望它在加载时专注于输入框。

<!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>

我知道我用这段代码打破了一堆规则，所以你不需要说什么。

编辑：

<!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>

编辑 2：

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

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

【问题讨论】：

标签： javascript html input dom-events

【解决方案1】：

双引号不能包含双引号，不仅在javascript中，任何其他语言都是一样的。

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

【讨论】：

好的，我更新了页面，但这个其他焦点不起作用。（编辑）
对于onblur方法，可能需要声明一个函数，因为内联编码不能被嵌套超过2次的引号包围。setTimeout的第一个参数应该被引号包围...
try:setTimeout("document.getElementById('search').focus()",10);
我也遇到了同样的问题，想知道为什么你必须使用 setTimeout 方法而不能直接调用函数/事件？
@LeeTickett 你发现了吗？

【解决方案2】：

如果你使用的是 jquery：

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

或原型：

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

或纯javascript：

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

它的可读性比内联事件“更好”...

【讨论】：

【解决方案3】：

您必须将search 放入单引号中：

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

【讨论】：

【解决方案4】：

将搜索放在单引号中，因为您在 document.getelementbyid 周围有双引号

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

【讨论】：

【解决方案5】：

您遇到此问题是因为您在 onfocus 事件中使用了相同的引号，您可以将 "search" 更改为 'search' 以解决此问题。

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

不过，理想情况下，您应该在 JavaScript 中附加您的事件，以便您的标记保持清晰，并且页面的所有功能方面都位于一个位置。

jsFiddle

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

【讨论】：

【解决方案6】：

使用 setTimeout 函数在代码中设置一些延迟来解决此问题。

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

【讨论】：