使窗体在keydown事件上可见，然后聚焦并清除输入字段

Question

我有一张表格，其中的单元格接受键盘事件。 我也有一个最初隐藏的表单。 我希望按键事件显示表单并将焦点放在输入字段上，但是当我这样做时，触发该事件的按键值会出现在输入字段中-我怎么不显示此字符？ （例如，按“ x”，该表单在文本字段中显示为“ x”-我希望该字段为空白）。

CSS

table.thistbl td {
  border: 2px solid black;
  width: 20px;
  height: 20px;
  padding: 5px;
}

#formid {
  display: none;
  position: absolute;
  width: 300px;
  height: 40px;
  left: 20px;
  top: 60px;
  background-color: #CCC;
}

JavaScript / jQuery：

$(function() {

  $('#tablediv').on('keydown', 'td', function(e) {
      $('#formid').show();
      $('#inputid').focus();
  });

});

HTML：

<div id="tablediv">
<table class="thistbl">
  <tr>
    <td tabindex="0"></td>
    <td tabindex="0"></td>
    <td tabindex="0"></td>
  </tr>
</table>
</div>

<form id="formid">
  <input type="text" tabindex="1" id="inputid" />
</form>

小提琴

Answer 1

尝试使用keyup而不是keydown

在这里摆弄

Answer 2

短暂的延迟如何？

$('#tablediv').on('keydown', 'td', function(e) {
    setTimeout(funtion(){
        $('#formid').show();
        $('#inputid').focus();
    }, 20);
});

Answer 3

如果您坚持使用keydown ，请添加e.preventDefault()以防止该事件的默认行为。 但我认为KiiroSora09的答案是切换到keyup更好。

 $(function() { $('#tablediv').on('keydown', 'td', function(e) { e.preventDefault(); $('#formid').show(); $('#inputid').focus(); }); }); 

 table.thistbl td { border: 2px solid black; width: 20px; height: 20px; padding: 5px; } #formid { display: none; position: absolute; width: 300px; height: 40px; left: 20px; top: 60px; background-color: #CCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tablediv"> <table class="thistbl"> <tr> <td tabindex="0"></td> <td tabindex="0"></td> <td tabindex="0"></td> </tr> </table> </div> <form id="formid"> <input type="text" tabindex="1" id="inputid" /> </form> 

Answer 4

尝试包括

$('#inputid').focus().attr('value', '');

您实际上在这里所做的是在集中精力之后只是清空了value

像下面

$(function() {

  $('#tablediv').on('keydown', 'td', function(e) {
      $('#formid').show();
      $('#inputid').focus().attr('value', '');
  });

});