admin 管理员组

文章数量: 1086019

I have been searching and have not found any particular thread that addresses my issue.

I am trying to either write an event listener or a conditional action with JavaScript that reacts when a user selects the TAB key and shifts focus to the appropriate element on screen.

Current DIV id has focus on screen => id="Slide14549accStr2" When the user selects the TAB key, I want the user's focus to immediately shift to DIV id "Titleinformation_tb". I am unable to change the TabIndex in the HTML to do this the normal way, so I am left with using javascript in some form.

Here is what I have so far.

document.getElementById('Slide14549accStr2').addEventListener('keydown') {
  if event.keyCode == 9) {
  var elem =
    document.getElementById('Titleinformation_tb');
  $(elem).focus();
};

I would appreciate any help and feedback.

I have been searching and have not found any particular thread that addresses my issue.

I am trying to either write an event listener or a conditional action with JavaScript that reacts when a user selects the TAB key and shifts focus to the appropriate element on screen.

Current DIV id has focus on screen => id="Slide14549accStr2" When the user selects the TAB key, I want the user's focus to immediately shift to DIV id "Titleinformation_tb". I am unable to change the TabIndex in the HTML to do this the normal way, so I am left with using javascript in some form.

Here is what I have so far.

document.getElementById('Slide14549accStr2').addEventListener('keydown') {
  if event.keyCode == 9) {
  var elem =
    document.getElementById('Titleinformation_tb');
  $(elem).focus();
};

I would appreciate any help and feedback.

  • javascript
Share Improve this question edited Aug 22, 2017 at 17:02 brk 50.4k10 gold badges59 silver badges83 bronze badges asked Aug 22, 2017 at 16:56 Agent OrangeAgent Orange 211 gold badge1 silver badge2 bronze badges 1
  • If you can't change the tabindex in the HTML, why not change it via JavaScript? Can I dynamically set tabindex in JavaScript? – yuriy636 Commented Aug 22, 2017 at 17:01
Add a ment  | 

2 Answers 2

Reset to default 4

If you just fix all the syntax errors, it works just fine, but you should be preventing the default action as well, to make sure it doesn't tab to the next element

document.getElementById('Slide14549accStr2').addEventListener('keydown', function(event) {
  if (event.keyCode == 9) {
    event.preventDefault();
    var elem = document.getElementById('Titleinformation_tb');
    elem.focus();
  }
});
<input id="Slide14549accStr2" placeholder="Focus this, and tab out">
<br><br><br>
<input><input><input>
<br><br><br>
<input id="Titleinformation_tb" placeholder="Should go here">

You were missing the function call. 

document.getElementById('Slide14549accStr2')
.addEventListener('keydown',function(e){
 if (event.keyCode == 9){
    var elem = document.getElementById('Titleinformation_tb');
  $(elem).focus();
 }
});

本文标签： JavascriptUsing EventListener with Tab Key and Focus FunctionStack Overflow

版权声明：本文标题：Javascript - Using EventListener with Tab Key and Focus Function - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744067431a2527862.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。