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

Question

我有一个表格，单元格接受键盘事件。我也有一个最初隐藏的表格。我想要一个键事件来显示表单并专注于输入字段，但是当我这样做时，触发事件的键值出现在输入字段中 - 我怎么能不显示这个字符？ （例如，按＆＃39; x＆＃39;，表单会在文本字段中显示＆＃39; x＆＃39; - 我希望该字段为空白。）

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>

Fiddle

Answer 1

尝试使用keyup代替keydown

Fiddle here

Answer 2

短暂延迟怎么样？

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

Answer 3

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

＆＃13;

＆＃13;

$(function() {

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

});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

尝试包含

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

你在这里做的是在专注于清空value

之后

如下所示

$(function() {

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

});