jQuery按键输入不起作用答案

【问题标题】：jQuery keypress enter not workingjQuery按键输入不起作用
【发布时间】：2018-02-10 02:03:48
【问题描述】：

我尝试使用按键来获取文本以更新 .我的 html 看起来像这样：

<p>words words words <i>test</i> more words</p>
<div id="newWord">
   <form>
      <input type="text" placeholder="New Hashtag"></input>
   </form>
</div>

我的 jQuery 看起来像这样：

$(document).ready(function () {
    $("input").keypress(
        function (e) {
            var currentInput = $("input").val();
            console.log(currentInput);
            if (e.keyCode === 13) {
                console.log('hello');
            }
        }
    );
})

我的控制台日志没有在第一次按键时登录，我该如何解决？我的“你好”也从不登录。任何想法为什么会发生这种情况？

谢谢！

【问题讨论】：

虽然我不确定这是否是原因，但尝试.on:api.jquery.com/on 可能是个好主意。您还可以使用$(this) 获取当前对象触发事件。

标签： javascript jquery html input keypress

【解决方案1】：

使用keyup 事件捕获第一个键盘字符。

$(document).ready(function () {
    $("input").keyup(
        function (e) {
            var currentInput = $("input").val();
            console.log(currentInput);
            if (e.keyCode === 13) {
                console.log('hello');
                alert('hello');
            }
        }
    );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>words words words <i>test</i> more words</p>
<div id="newWord">
  <form>
    <input type="text" placeholder="New Hashtag">
  </form>
</div>

注意：点击Enter 键将提交表单并重定向页面。您可能看不到“hello”的控制台消息

【讨论】：

谢谢！那行得通！任何想法为什么我的输入没有记录（“你好”）？
enter 键正在工作，但它正在提交表单...这就是您没有看到它的原因。更新了上面的代码，我输入了alert，您可以看到enter 工作正常。

【解决方案2】：

keypress 函数在按键被按下时立即触发。您想使用keyup，因为它会在释放键时触发。

【讨论】：

谢谢！当下面的 Muthu 建议时，我尝试过。任何想法为什么我的输入没有记录（“你好”）？

【解决方案3】：

你需要使用keyup，因为keypress会在按下一个键时触发值，这与释放一个键是分开的。

可以进行的更改很少。 input 是一个自闭合标签。另外最好在函数内部使用$(this)，因为它只会从触发事件的输入中获取值。

这里可能有一个问题。按enter/return 键，您可能会看到表单正在提交

$(document).ready(function() {
  $("input").keyup(function(e) {
    var currentInput = $(this).val();
    console.log(currentInput);
    if (e.keyCode == 13) {
      console.log('hello');
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>words words words <i>test</i> more words</p>
<div id="newWord">
  <form>
    <input type="text" placeholder="New Hashtag">
  </form>
</div>

【讨论】：