jquery - jquery选择更改事件发生和键盘导航

Question

此问题与jquery 选择选项单击处理程序 9 岁问题有关。

我有一个下拉列表，这个下拉列表可能非常大。我想在下拉列表更新时自动提交表单。

• 如果我使用 on("click") 事件：它适用于 Firefox，但不适用于 Chromium。
• 如果我使用 on("change") 事件：它适用于两者（当然也适用于其他）但是：无法转到最后一个元素，当通过键盘选择选项时发生更改事件
• 如果我使用 on("blur") 事件：它在更改时起作用，但也没有选择更新……</li>

$(document).ready(function(){
     $("#onchange").change(function(){
     /* this happen at bb, no way to set FF */
        $("#form").submit();
   });
     $("#onblur").blur(function(){
        /* happen without update */
        $("#form").submit();
   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<label for="onchange">onchange</label>
<select name="onchange" id="onchange">
<option value="aa" selected="selected">AA</option>
<option value="bb">BB</option>
<option value="cc">CC</option>
<option value="dd">DD</option>
<option value="ee">EE</option>
<option value="ff">FF</option>
</select>
<hr>
<label for="onblur">onblur</label>
<select name="onblur" id="onblur">
<option value="aa" selected="selected">AA</option>
<option value="bb">BB</option>
<option value="cc">CC</option>
<option value="dd">DD</option>
<option value="ee">EE</option>
<option value="ff">FF</option>
</select>
<hr>
<input type="submit" value="submit">
</form>

有人有一个很好的解决方案来禁用键盘导航的选择更改事件吗？

谢谢

截屏：

• Firefox 84.0.2（64 位）/Linux
• Chromium 版本 87.0.4280.88 / Linux（64 位）

标签： jqueryonchange

Answer 1

这是针对这种不酷行为的“修复”建议...

上Tab键时，如果select聚焦，则保存该值。focus仅当值在和blur事件之间发生变化时才提交表单。

$(document).ready(function() {
  let selectVal
  
  $(document).on("keyup", function(e){
    if(e.key==="Tab" && $("#onblur").is(":focus")){
      selectVal = $("#onblur").val()
      console.log("val setted")
    }
  })

  $("#onblur").blur(function() {
    if (selectVal !== $(this).val()) {
      $("#form").submit();
    }else{
      console.log("Value was not changed")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">

  <label for="onblur">onblur</label>
  <select name="onblur" id="onblur">
    <option value="aa" selected="selected">AA</option>
    <option value="bb">BB</option>
    <option value="cc">CC</option>
    <option value="dd">DD</option>
    <option value="ee">EE</option>
    <option value="ff">FF</option>
  </select>
  <hr>
  <input type="submit" value="submit">
</form>

对于许多选择...这是使用.onblur该类的变体。

$(document).ready(function() {

  let selects = $(".onblur")
  let selectVal
  
  $(document).on("keyup", function(e){
    if(e.key==="Tab" && selects.is(":focus")){
      selectVal = $(".onblur:focus").val()
      console.log("val setted")
    }
  })

  selects.blur(function() {
    if (selectVal !== $(this).val()) {
      $("#form").submit();
    }else{
      console.log("Value was not changed")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  
  <label for="onblur1">onblur1</label>
  <select name="onblur1" id="onblur1" class="onblur">
    <option value="aa" selected="selected">AA</option>
    <option value="bb">BB</option>
    <option value="cc">CC</option>
    <option value="dd">DD</option>
    <option value="ee">EE</option>
    <option value="ff">FF</option>
  </select>
  <hr>
  <label for="onblur2">onblur2</label>
  <select name="onblur2" id="onblur2" class="onblur">
    <option value="aa" selected="selected">EE</option>
    <option value="bb">FF</option>
    <option value="cc">GG</option>
    <option value="dd">HH</option>
    <option value="ee">II</option>
    <option value="ff">JJ</option>
  </select>
  <hr>
  <label for="onblur3">onblur3</label>
  <select name="onblur3" id="onblur3" class="onblur">
    <option value="aa" selected="selected">KK</option>
    <option value="bb">LL</option>
    <option value="cc">MM</option>
    <option value="dd">NN</option>
    <option value="ee">OO</option>
    <option value="ff">PP</option>
  </select>
  <hr>
  <input type="submit" value="submit">
</form>

正如您在评论中建议的那样，使用数据属性可能会更好！;)

$(document).ready(function() {

  let selects = $(".onblur")
  
  // Set a data attribute for each select
  selects.each(function(){
    $(this).data("selected", $(this).val())
  })
  
  // On blur, compare the value with the data attribute
  selects.blur(function() {
    if ($(this).data("selected") !== $(this).val()) {
      $("#form").submit();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  
  <label for="onblur1">onblur1</label>
  <select name="onblur1" id="onblur1" class="onblur">
    <option value="aa" selected="selected">AA</option>
    <option value="bb">BB</option>
    <option value="cc">CC</option>
    <option value="dd">DD</option>
    <option value="ee">EE</option>
    <option value="ff">FF</option>
  </select>
  <hr>
  <label for="onblur2">onblur2</label>
  <select name="onblur2" id="onblur2" class="onblur">
    <option value="aa" selected="selected">EE</option>
    <option value="bb">FF</option>
    <option value="cc">GG</option>
    <option value="dd">HH</option>
    <option value="ee">II</option>
    <option value="ff">JJ</option>
  </select>
  <hr>
  <label for="onblur3">onblur3</label>
  <select name="onblur3" id="onblur3" class="onblur">
    <option value="aa" selected="selected">KK</option>
    <option value="bb">LL</option>
    <option value="cc">MM</option>
    <option value="dd">NN</option>
    <option value="ee">OO</option>
    <option value="ff">PP</option>
  </select>
  <hr>
  <input type="submit" value="submit">
</form>