Datalist：检测是否通过单击项目或按下键启动事件输入

Question

 $("#football_players").bind('input', function (ev) {
                alert("I want to know what is event launcher");
});

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

  <datalist id="datalist_football_players">
    <option value="Maradona" />
    <option value="Pele" />
    <option value="Platini" />
    <option value="Cruif" />
    <option value="Messie" />
</datalist>
<input id="football_players" list="datalist_football_players" />

我有一个数据列表，用于为输入文本提供自动建议，我想知道何时单击了该数据列表中的一个项目，由于这样的事件输入，我可以做到这一点：

HTML:

 <datalist id="datalist_football_players">
      <option value="Maradona" />
      <option value="Pele" />
      <option value="Platini" />
      <option value="Cruif" />
      <option value="Messie" />
</datalist>

<input id="football_players" list="datalist_football_players" />

JS:

$("#football_players").bind('input', function (ev) {
    console.log("input event has been launched by click or by key press??");
});

不幸的是，按键已经启动了事件输入，我不知道事件输入是否已通过点击或按键启动

您是否知道一种方法来确定，如果是的话，还有一种方法可以知道按下了哪个键？

Answer 1

您可以通过在适当的目标上绑定适当的事件来检查事件来捕获.. 当文本框有一些键入的值然后单击完成时，也会触发退格键事件

所以请尝试以下 -

var eventKey=null;
$("#football_players").bind('keydown', function (ev) {
 eventKey=ev.which;
});
$("#football_players").bind('input', function (ev) {
    if(eventKey==null || (""==$(this).val() && eventKey==8 ))
    console.log("click");
    else
    console.log("key pressed"+eventKey);

    eventKey=null;
});

直播 http://jsfiddle.net/mailmerohit5/q9dy5xL0/

Datalist：检测是否通过单击项目或按下键启动事件输入

Datalist : detect if event input is launched by a click on item or a Key pressed

javascript

jquery

event-handling

javascript-events