jQuery 按键输入无效

Question

我尝试使用按键从中获取文本以更新 .我的 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');
            }
        }
    );
})

我的控制台日志没有在第一次按键时登录，我该如何帮助它？我的 "hello" 也从不登录。知道为什么会这样吗？

谢谢！

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

的控制台消息

Answer 2

keypress 函数在按下某个键时立即触发。你想使用 keyup 因为当释放键时它会触发。

Answer 3

您需要使用 keyup，因为按键将在按下与释放键分开的键时立即触发值。

可以做的更改很少。 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>

jQuery 按键输入无效

jQuery keypress enter not working

html

javascript

jquery

input

keypress