jQuery select2 - 无法使用TAB在表单中移动

时间:2016-08-31 14:00:26

标签: javascript jquery select2

我正在尝试在使用TAB键进行聚焦时打开<div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="h3">Open select2 on focus</h1> <p>Click on the email input then use tab to change to select2 field. You will notice that select2 dropdown doesn't open.</p> <form action="#"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> <br> <label for="select2">Here is select2</label> <select class="form-control js-select" multiple="multiple"> <option value="1">Option A</option> <option value="2">Option B</option> <option value="3">Option C</option> </select> <br/> <label for="firstName">First name</label> <input type="text" class="form-control" id="firstName" placeholder="Name"> <br> <label for="lastName">Last name</label> <input type="text" class="form-control" id="lastName" placeholder="Surname"> <br> </form> </div> </div> </div> 。我在stackoverflow上找到了一些建议,但它们并不适用于我。最后,我来了解决方案(https://jsfiddle.net/shimon001/k06g0tgj/6/):

HTML

$('.js-select').select2({
  placeholder: "Select",
  width: "100%",
  multiple: false
});

$('.js-select').on('select2:open', function(){
    console.log('opened');
});

$('.container').on('keyup', 'form', function(e) {
  var keyCode = e.keyCode || e.which;
  e.stopPropagation();

  if (keyCode == 9) {
    console.log('TAB');
    var focused = document.activeElement;
    console.log(focused);
    if ($(focused).hasClass('select2-selection')) {
      console.log('has class');
      $(focused).closest('.select2').prev().select2('open');
    }

  }
});

JS:

select2

我可以在使用TAB键进行聚焦时打开select2但是我无法使用TAB键进一步遍历表单

我尝试检查哪个元素在body元素之后聚焦,它是select2元素。我想这是因为当打开select2框时,焦点会从表单中跳出来。

有什么建议,可以在离开if(linkedlist == null) { //head node is null i.e, linked list is empty hence make the new node as head node linkedlist = new_element; }else{ //make the new node point to the head new_element->next = linkedlist; //make the new node as head node linkedlist = new_element; } 框后继续使用表单中的下一个元素吗?

由于 希蒙

0 个答案:

没有答案