Question

我有一个HTML输入框

<input type="text" id="foo" value="bar">

我为' keyup '事件添加了一个处理程序，但是如果我在事件处理程序中检索输入框的当前值，我会得到它的值，而不是它会！

我已尝试选择' keypress '和'更改'事件，同样的问题。

我确信这很容易解决，但目前我认为唯一的解决方案是让我使用短暂超时在未来几毫秒内触发一些代码！

无论如何都要在这些事件中获取当前值吗？

编辑：看起来我的js文件存在缓存问题，因为我稍后检查了相同的代码并且工作得很好。我会删除这个问题，但不确定是否会失去那些发表意见的善良人士代表：）

Answer 1

你可以发布你的代码吗？我没有发现任何问题。在Firefox 3.01 / safari 3.1.2上测试：

function showMe(e) {
// i am spammy!
  alert(e.value);
}
....
<input type="text" id="foo" value="bar" onkeyup="showMe(this)" />

Answer 2

有两种输入值：字段的属性和字段的html 属性。

如果你使用keyup event和field.value，你可以获得该字段的当前值。当你使用field.getAttribute（'value'）来返回html属性（value =“”）中的内容时，情况并非如此。该属性表示在字段中键入的内容并在您键入时更改，而属性不会自动更改（您可以使用field.setAttribute方法更改它。）

Answer 3

为此问题提供现代方法。这很有效，包括 Ctrl + v 。 GlobalEventHandlers.oninput

var onChange = function(evt) {
  console.info(this.value);
  // or
  console.info(evt.target.value);
};
var input = document.getElementById('some-id');
input.addEventListener('input', onChange, false);

Answer 4

<html>
    <head>
        <script>
        function callme(field) {
            alert("field:" + field.value);
        }
        </script>
    </head>
    <body>
        <form name="f1">
            <input type="text" onkeyup="callme(this);" name="text1">
        </form>
    </body>
</html>

看起来您可以使用onkeyup来获取HTML输入控件的 new 值。希望它有所帮助。

Answer 5

您可以尝试此代码（需要jQuery）：

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#foo').keyup(function(e) {
                var v = $('#foo').val();
                $('#debug').val(v);
            })
        });
    </script>
</head>
<body>
    <form>
        <input type="text" id="foo" value="bar"><br>
        <textarea id="debug"></textarea>
    </form>
</body>
</html>

Answer 6

Here是不同事件和浏览器支持级别的表。您需要选择至少在所有现代浏览器中都支持的事件。

正如您将从表中看到的那样，keypress和change事件没有统一支持，而keyup事件则支持统一支持。

还要确保使用跨浏览器兼容的方法附加事件处理程序...

如何在按键修改后获取HTML输入的新值？

6 个答案: