Fatal编程技术网
  • javascript/
  • Javascript 如何在按键修改后获得HTML输入的新值？

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

javascript html dom

Javascript 如何在按键修改后获得HTML输入的新值？,javascript,html,dom,Javascript,Html,Dom,我有一个HTML输入框 <input type="text" id="foo" value="bar"> 我已经为“keyup”事件附加了一个处理程序，但是如果我在事件处理程序期间检索到输入框的当前值，我会得到原来的值，而不是将来的值 我试着拿起“按键”和“改变”事件，同样的问题 我相信这很容易解决，但目前我认为唯一的解决方案是在未来几毫秒内使用短超时触发一些代码 在这些事件中是否仍有获取当前值的方法 编辑：看起来我的js文件有缓存问题，因为我后来检查了相同的代码，它工作得很好

我有一个HTML输入框

<input type="text" id="foo" value="bar">
我已经为“keyup”事件附加了一个处理程序，但是如果我在事件处理程序期间检索到输入框的当前值，我会得到原来的值，而不是将来的值

我试着拿起“按键”和“改变”事件，同样的问题

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

在这些事件中是否仍有获取当前值的方法

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

你能发布你的代码吗？我不觉得这有什么问题。在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)" />

函数showMe（e）{
//我是垃圾！
警觉（e.value）；
}
....
是不同事件和浏览器支持级别的表。您需要选择至少所有现代浏览器都支持的事件

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

还要确保使用跨浏览器兼容的方法连接事件处理程序…



<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>


函数callme（字段）{
警报（“字段：+field.value”）；
}
看起来您可以使用onkeyup来获取HTML输入控件的新值。希望有帮助。

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


$（文档）.ready（函数（）{
$（'#foo'）.keyup（函数（e）{
var v=$（'#foo'）.val（）；
$（'#debug'）.val（v）；
})
});
有两种输入值：字段的属性和字段的html属性

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

为这个问题提供了一种现代方法。这很有效，包括Ctrl+v

我回到家，从subversion中检查了我的代码，它工作得很好。我想我肯定是js文件有缓存问题，它被困在处理按键而不是键控上。感谢您在编写示例代码方面所做的努力，因此将此标记为答案：） 
<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>

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);