键盘键和箭头无法正确使用此脚本 [英] Keyboard keys and arrows don't work with this script correctly

问题描述

我有这个脚本，您可以输出您在select标签中选择的值，这与click事件完美配合但是如果我点击第一个输入并按Tab键按钮继续选择标签使用

I have this script that you can output the value that you selected in the select tag this works perfectly with the click event but if I would click on the first input and press the tab button to move on to the select tag with out using the

鼠标导航到select标签，然后您可以使用键盘箭头选择值，或者键入您在select标签选项中看到的值，但它是没有工作或它很少工作足以显示我在id元素调用numbersMessage输出的值，有时我

mouse to navigate to the select tag then you can select the values with the keyboard arrows or by typing out the values you see in the select tag options but it is not working or it rarely works enough to show what value I I'm on which it is outputted in the id element call numbersMessage and some times I

必须加倍输入为了让它在numbersMessage元素中显示我所处的价值而输出值。那么我怎样才能使用箭头键来实现这一点，当我输入我在select标签中看到的内容时，这是我的代码。

have to double type the value out to get it to show what value I am on in the numbersMessage element. So how can I get this to work with the arrow keys and when I type out what I see in the select tag here is my code.

 $(document).ready(function(){
   function nF(){
      var numberX = document.getElementById('numbers').value;
    
    if(numberX == 'one'){
       $('#numbersMessage').html('You selected: ' + numberX);
    }
    
    else if(numberX == 'two'){
       $('#numbersMessage').html('You selected: ' + numberX);
    }
    
     else if(numberX == 'three'){
       $('#numbersMessage').html('You selected: ' + numberX);
    }
   }
    
    //Works perfect, any click will output the value I selected
    $('#numbers').click(function(){
   nF();
  });
   
  //Not working how I wan't it to work...
  $('#numbers').keypress(function(){
   nF();
  });
    
});

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<p>Click on the first input and press the tab key on the keyboard and type out the select option value out or use the arrows on the keyboard to see what value you will select in the select tag a message should appear on what value you have selected below.</p>

<input style='display:block; width: 800px;'type='text'>

<select id='numbers'>
<option value='one'>1</option>
<option value='two'>2</option>
<option value='three'>3</option>
</select>

<p id='numbersMessage'></p>

以及输入元素在此代码示例中不重要的最后一件事我只添加了输入元素向你们展示选择标签脚本无法正常工作的其他情况，这样你们就不会混淆我输入标签的原因。

and one last thing the input element is not important in this code example I only added that input element to show you guys what other situations that the select tag script don't work properly in so you guys won't get confused why I put that input tag in.

推荐答案

$('#numbers').on('change', function(){
   nF();
});

尝试调用下拉列表的更改事件。

Try to call on change event of dropdown.

这篇关于键盘键和箭头无法正确使用此脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！