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

【问题标题】：How to get the new value of an HTML input after a keypress has modified it?按键修改后如何获取 HTML 输入的新值？
【发布时间】：2010-09-18 08:59:42
【问题描述】：

我有一个 HTML 输入框

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

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

我尝试过处理 'keypress' 和 'change' 事件，同样的问题。

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

有没有办法在这些事件中获取当前值？

编辑：看起来我的 js 文件有缓存问题，因为我稍后检查了相同的代码，它工作得很好。我会删除这个问题，但不确定这是否会失去发表想法的好心人的代表:)

【问题讨论】：

标签： javascript html dom

【解决方案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)" />

【讨论】：

我回到家，从颠覆中检查了我的代码，它工作得很好。我想我的 js 文件一定有缓存问题，它卡在处理按键而不是按键上。感谢编写示例代码所付出的努力，因此将其标记为答案:)

【解决方案2】：

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

从表中可以看出，keypress 和 change 事件没有统一的支持，而 keyup 事件有。

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

【讨论】：

【解决方案3】：

<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 值。希望对您有所帮助。

【讨论】：

【解决方案4】：

你可以试试这个代码（需要 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>

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

为这个问题提供一个现代的方法。这很好用，包括 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);

【讨论】：