31

我有一个 HTML 输入框

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

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

我试过拿起' keypress '和' change '事件,同样的问题。

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

无论如何在这些事件期间获得当前值?

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

4

6 回答 6

38

你可以发布你的代码吗?我没有发现任何问题。在 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)" />
于 2008-10-21T17:45:01.620 回答
19

给这个问题一个现代的方法。这很好用,包括Ctrl+ vGlobalEventHandlers.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);
于 2015-11-26T18:51:49.503 回答
8

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

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

于 2008-10-21T18:00:56.533 回答
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 输入控件的值。希望能帮助到你。

于 2008-10-21T17:47:01.740 回答
1

你可以试试这段代码(需要 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>
于 2008-10-21T17:51:51.857 回答
0

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

从表中可以看出,keypressandchange事件没有统一的支持,而keyupevent 有。

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

于 2008-10-21T17:45:02.400 回答