Select 值 select 作为键盘按钮按下

Question

我正在制作一个系统，在模糊之后附加 html select，用户需要 select 从 select 框中选择一个选项。但是我需要 selected 值应该是 select 如果用户在他的键盘上按相同的值键就像我按 2 一样 selected 值应该是 2.

$('input').on('blur', function() {
  $(this).after("<select class=\"form-control\"><option value=\"Option\">option</option><option value=\"2\">2 </option><option value=\"3\">3 </option><option value=\"4\">4</option><option value=\"5\">5 </option><option value=\"6\">6 </option><option value=\"7\">7 </option><option value=\"8\">8 </option></select>");
  $('.form-control').on('change', function() {
    $('input').after('<span>' + $(this).val() + '</span>');
    $(this).hide();
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">

Answer 1

只需将焦点设置到新的 select 控件，就像给自动对焦一样 select 控件的属性应该可以解决问题。

$('input').on('blur',function(){
$(this).after("<select class=\"form-control\" tabindex=\"1\" autofocus><option value=\"Option\">option</option><option value=\"2\">2 </option><option value=\"3\">3 </option><option value=\"4\">4</option><option value=\"5\">5 </option><option value=\"6\">6 </option><option value=\"7\">7 </option><option value=\"8\">8 </option></select>");
$('.form-control').on('change',function(){
$('input').after('<span>'+$(this).val()+'</span>');
$(this).hide();
$('.text-control').val($('input').val() + $(this).val());
});
$('.form-control').focus();
})

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="text" class="text-control">

Answer 2

如果用户只模糊输入，那么你只显示 select 框

然后，如果输入中有一些值，它将被 select 编辑到 select 框中

希望对您有所帮助

$('input').on('blur', function() {
  // check if the select is already present in the DOM
  if (!$(".form-control").length) {
    // get the input value
    var inputVal = $(this).val();
    
    // we start the select form before the loop
    var form = "<select class=\"form-control\"><option value=\"Option\">option</option>";

    // we loop from 2 to 8
    for (i = 2; i < 9; i++) {
      // if the selected value from the input match with the value of the loop var then we selected it
      var selected = (i == inputVal ? " selected" : "");
      form += "<option value=\"" + i +"\"" + selected + ">" + i +" </option>";
    };

    // we the the closing tag for the select
    form += "</select>";
    
    // we inject the form after the input
    $(this).after(form);
  }
  
  $('input').on('change', function() {
    // the value change in input so we get it
    var newVal = $.trim($(this).val());
    // we remove all selected attribut of all option in select
    $(".form-control option").removeAttr('selected');
    // then we add the selected attribut to the right option
    $('.form-control option[value="'+ newVal +'"]').prop("selected","selected");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">

Select 值 select 作为键盘按钮按下

Select value select as keyboard button press

javascript

css

jquery

html-select