javascript - 如何捕获按下的 ESC 和 Enter 键？

Question

当用户输入 ESC 或 ENTER 时，我遇到了问题。我想要做的是使用 AJAX、jQuery 就地编辑昵称。

例如我的 HTML 中有一段代码:

<div id="nick">Change Nick</div>

接下来是我在 JS 中的代码

<script>
$(document).ready(function(){    
  var oldText, newText;    
  $("#nick").bind("dblclick", replaceHTML);    
  function replaceHTML() {
    $("#nick").empty();
    $("#nick").append("<form><input type=\"text\" class=\"form-control input-lg\" /></form><button class=\"btn btn-default\" type=\"button\" id=\"btnSave\">Save</button><button class=\"btn btn-default\" type=\"button\" id=\"btnDiscard\">Discard</button>");
    $("#nick").unbind("dblclick", replaceHTML);
  }    
  $('#btnDiscard').click(function() {
    alert('rr');
  });    
});
</script>

好的，现在当我 DBL 单击 Nick Change 时，我将替换为输入文本。但是当我点击丢弃时，我没有alert('rr')。当我手动输入 append("") 中的相同代码时，当我单击 Discard 时，我有警报。

我该怎么办？因为也许我应该只在按 Enter 键保存并按 esc 键禁用时接收。我该如何解决？

Answer 1

您试图在元素进入 dom 之前绑定(bind)操作。您需要将点击绑定(bind)移动到函数中:

function replaceHTML() {
  $("#nick").empty();
  $("#nick").append("<form><input type=\"text\" class=\"form-control input-lg\" /></form><button class=\"btn btn-default\" type=\"button\" id=\"btnSave\">Save</button><button class=\"btn btn-default\" type=\"button\" id=\"btnDiscard\">Discard</button>");
  $("#nick").unbind("dblclick", replaceHTML);

  $('#btnDiscard').click(function() {
    alert('rr');
  });
}

编辑:

如果您确实想监听转义或输入键，请使用以下命令:

$(document).keyup(function(e) {
  if (e.keyCode == 27) {
    // esc
  }   
  else if (e.keyCode == 13) {
    // enter
  }
});