Question

我有以下代码。

<!DOCTYPE html>
<html>
<head>
<title>Focus issue</title>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
  var text = document.getElementById('text')
  window.onload = function() {
    text.focus()
  }
  window.onhashchange = function() {
    text.focus()
  }
}//]]>  
</script>
</head>
<body>
  <textarea id="text"></textarea>
  <p><a href="#focus">Click to focus</a></p>
</body>
</html>

以上代码的JSFiddle演示：http://jsfiddle.net/DvU63/

为什么页面加载时焦点不会转到textarea框？在单击链接时，焦点确实在textarea框上，但我也希望焦点转到页面加载时的textarea框。为什么不发生？

注意：我知道textarea的HTML5自动聚焦属性。但是这个问题是为什么上面的JavaScript代码没有按照我打算做的去做。

Answer 1

您正在.focus()处理程序内部执行onload语句，该处理程序本身是在onload处理程序中定义的。不会调用此内部onload，因为在您定义它时，onload事件将会发生。试试这个：

window.onload=function(){
  var text = document.getElementById('text')
  text.focus()

  window.onhashchange = function() {
    text.focus()
  }
}

您的演示版已更新：http://jsfiddle.net/DvU63/2/

Answer 2

这样做

<script type='text/javascript'> 
    window.onload=function(){
    var text = document.getElementById('text')

    text.focus();

    window.onhashchange = function() {
        text.focus();
    }
  }
</script>

fiddle

JavaScript focus（）函数不会在页面加载时将textarea聚焦

2 个答案: