Question

与Stack Overflow类似，我正在尝试创建一个jquery方法，记录并显示用户输入<input type='text'>字段的值。

<form>
  Language:</br>
  <input type="text" language="language">
  <input type="submit" value="submit">
</form>

<p>
</p>

<script>
  $(document).ready(function () {
    $(":text").keypress(function () {
      $("p").text($(":text").val());
    });
  });
</script>

它准确地记录了正确的值，但它太慢了一步。如果我输入第一个字符，它不会显示，但在输入第二个字符后，只记录第一个字符。如果我输入3个字符，则会记录前2个字符，等等。

我该如何解决这个问题？

Answer 1

尝试将事件绑定到keyup事件

<form>
  Language:</br>
  <input type="text" language="language">
  <input type="submit" value="submit">
</form>

<p>
</p>

<script>
  $(document).ready(function () {
    $(":text").keyup(function () {
      $("p").text($(":text").val());
    });
  });
</script>

根据jQuery文档：注意：由于keypress事件未被任何官方规范涵盖，因此使用它时遇到的实际行为可能因浏览器，浏览器版本和平台而异。

Answer 2

$(document).ready(function () {
    $(":text").keyup(function () {
      $("p").text($(":text").val());
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Language:</br>
  <input type="text" language="language">
  <input type="submit" value="submit">
</form>

<p>
</p>

Answer 3

你也可以制作一个jQuery插件。

$.fn.bindTo = function(element) {
  $(this).keyup(function() {
    element.text($(this).val());
  });
};

$(document).ready(function() {
  $("#input").bindTo($("#output"));
});

label {
  display: inline-block;
  width: 60px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="input">Input:</label>
  <input id="input" type="text" language="language">
  <br />
  <label for="output">Output:</label>
  <span id="output"></span>
</form>

Jquery - 显示用户输入的实时值

3 个答案: