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

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

谢谢！

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键将提交表单并重定向页面。 您可能看不到“你好”的控制台消息

Answer 2

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

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