admin管理员组

文章数量:1430938

I have the following code.

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

Here is a JSFiddle demo of the above code: /

Why doesn't the focus go on the textarea box when the page loads? On clicking the link, the focus does go on the textarea box, but I also want the focus to go to the textarea box on page load. Why doesn't it happen?

Note: I am aware of the HTML5 autofocus attribute for textarea. But this question is about why the above JavaScript code does not do what I intend to do.

I have the following code.

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

Here is a JSFiddle demo of the above code: http://jsfiddle/DvU63/

Why doesn't the focus go on the textarea box when the page loads? On clicking the link, the focus does go on the textarea box, but I also want the focus to go to the textarea box on page load. Why doesn't it happen?

Note: I am aware of the HTML5 autofocus attribute for textarea. But this question is about why the above JavaScript code does not do what I intend to do.

  • javascript
  • html
Share Improve this question edited Sep 1, 2013 at 7:29 nnnnnn 150k30 gold badges209 silver badges247 bronze badges asked Sep 1, 2013 at 7:24 Lone LearnerLone Learner 20.8k25 gold badges114 silver badges221 bronze badges 4
  • I think it does work, jsfiddle/DvU63/1 – Sergio Commented Sep 1, 2013 at 7:28
  • @Sergio Do you have an explanation about why adding an input text field resolves the issue? – Lone Learner Commented Sep 1, 2013 at 7:29
  • @Sergio My question is not specific to jsfiddle. Copy paste my code in this question and paste it to a file, say, foo.html and open it with Firefox and the same issue occurs. – Lone Learner Commented Sep 1, 2013 at 7:41
  • Yes, I understood that after @nnnnnn called my attention. You have a scope problem and I think his explanation is the answer to your question (and should be the accepted answer). – Sergio Commented Sep 1, 2013 at 7:44
Add a ment  | 

2 Answers 2

Reset to default 5

You're doing the .focus() statement from inside an onload handler that is itself defined inside an onload handler. This inner onload will not be called because by the time you define it the onload event will have occurred. Try this:

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

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

Your demo, updated: http://jsfiddle/DvU63/2/

do this

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

    text.focus();

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

fiddle

本文标签： htmlJavaScript focus() function doesn39t focus textarea on page loadStack Overflow

版权声明：本文标题：html - JavaScript focus() function doesn&#39;t focus textarea on page load - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745561913a2663522.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。