代码之家 › 专栏 › 技术社区 › Paul Dixon

如何在按键修改HTML输入后获取其新值?

dom html javascript

Paul Dixon · 技术社区 · 17 年前

我有一个HTML输入框

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

我已经为“ 弹起 '事件,但如果我在事件处理程序中检索输入框的当前值,我会得到原来的值,而不是将来的值!

我试着捡起按键以及变化 “事件,同样的问题。

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

在这些事件中,是否有任何方法可以获取当前值?

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

6 回复 | 直到 17 年前

doctorsherlock Owen 8 年前

你能发布你的代码吗?我没有发现任何问题。在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)" />

Jonatas Walker 10 年前

给一个 现代的 解决这个问题的方法。这很有效,包括 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);

pawel 17 年前

有两种输入值:字段的财产和字段的html 属性 .

若你们使用keyup事件和field.value,你们应该得到字段的当前值。当您使用field.getAttribute('value')时,情况并非如此,它将返回html属性中的内容(value=“”)。该属性表示在字段中键入的内容,并在键入时更改,而属性不会自动更改(您可以使用field.setAttribute方法更改它)。

Neal Swearer 17 年前

<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输入控件的值。希望它能有所帮助。

Marko Dumic 17 年前

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

从表中可以看出 keypress 和 change 事件没有统一的支持,而 keyup 事件确实如此。

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

domgblackwell 17 年前

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