Question

我有两个下拉列表框。应该发生的是，在第一个下拉列表中选择一个值并按下TAB后，第二个下拉列表应该检查第一个下拉列表是否真的按下了TAB。

这是关于这个问题的粗略代码想法。

HTML

<select id="CarModel">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select id="CarColor" onchange="TestTab();">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="yellow">Yellow</option>
</select>

JQUERY

function TestTab(){
 //Check if car model pressed tab before going to CarColor
}

注意：在下拉列表之间可能有另一个字段（也许是可以显示/隐藏的文本框）但流程仍然跟随CarColor应该知道前一个元素是否按下了TAB键或者鼠标按下了。

Answer 1

尝试这样的事情......

var Car = {
  modelChangeTabPressed: false,
  modelChange: function() {
    $('#CarModel').keyup(function(e) {
      Car.modelChangeTabPressed = (e.keyCode || e.which) === '9'
    });
  },
  colorChange: function() {
    $('#CarColor').change(function() {
      if (Car.modelChangeTabPressed) {
        //Tab was pressed
      } else {
        //Mouse click or some other way 
      }
    });
  }
}

确保调用方法来初始化这样的绑定。

Car.modelChange();
Car.colorChange();

Answer 2

当在第二个focus元素上触发<select>事件时，您可以检查事件对象上的relatedTarget property，以确定选择菜单所关注的元素。< / p>

在下面的示例中，keyup事件附加到第一个<select>元素，以确定是否按下了Tab键（键9）。
在附加到第二个focus元素的<select>事件侦听器中，您可以检查relatedTarget属性是否引用第一个<select>元素，然后检查在元素获得焦点之前是否按下了Tab键。

Example Here

var modelSelect = document.getElementById('CarModel');
var colorSelect = document.getElementById('CarColor');
var previousKeyupEvent = null;

modelSelect.addEventListener('keyup', function(event) {
  previousKeyupEvent = event;
});
colorSelect.addEventListener('focus', function(event) {
  var condition = event.relatedTarget === modelSelect &&
                  previousKeyupEvent &&
                  previousKeyupEvent.keyCode === 9;

  if (condition) {
    console.log('Tabbed from #CarColor');
  } else {
    console.log('Did not tab from #CarColor');
  }

  previousKeyupEvent = null; // Reset the variable
});

段：

var modelSelect = document.getElementById('CarModel');
var colorSelect = document.getElementById('CarColor');
var previousKeyupEvent = null;

modelSelect.addEventListener('keyup', function(event) {
  previousKeyupEvent = event;
});
colorSelect.addEventListener('focus', function(event) {
  var condition = event.relatedTarget === modelSelect &&
                  previousKeyupEvent &&
                  previousKeyupEvent.keyCode === 9;

  if (condition) {
    console.log('Tabbed from #CarColor');
  } else {
    console.log('Did not tab from #CarColor');
  }
  
  previousKeyupEvent = null; // Reset the variable
});

<select id="CarModel">
  <option>One</option><option>Two</option>
</select>
<select id="CarColor">
  <option>One</option><option>Two</option>
</select>

如何获取按键值以获取下拉列表中的TAB键代码

2 个答案: