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

我的控制台日志没有登录第一次按键，我该如何帮助它？我的＆＃34;你好＆＃34;从不记录。任何想法为什么会发生这种情况？

谢谢！

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按键输入不起作用

3 个答案: