Question

我遇到输入文字类型（即文本框）的问题。

我在文本框上编写了onkeyup事件使用的函数。这条线看起来像这样：

<input type='TEXT' value='abc' onkeyup='changeSomething( this );'>

但是现在我遇到的问题是，当用户从先前输入的值中选择值时，当用户从下拉列表中选择任何先前输入的值时，我没有收到任何事件（编辑：我相信他在这里指的是浏览器自动完成）。

有人有解决方案吗？ :)

Answer 1

在这种情况下，

使用onchange代替onkeyup

请参阅：http://www.w3schools.com/jsref/event_onchange.asp

e.g。

<input type='text' value='abc' onchange='changeSomething(this);' />

绕过这个

修改两件事：
1）可以使用箭头键和输入/选项卡以及使用鼠标选择自动完成值。箭头键/ enter.tab激活onkeyup事件...然后单击自动完成框不会触发onclick事件。
2）如果内容发生变化，一旦焦点丢失，onchange事件就会触发。选择自动填充值时，焦点不会丢失。

基本上，似乎没有任何方法可以合理地保证事件将按照您想要的方式处理。

首先，你真的需要听每次按键吗？其次，关闭自动完成功能会更好吗？（例如<input type='text' value='abc' autocomplete='off' onkeyup='changeSomething(this);' />）

Answer 2

这是一个定期轮询元素以进行任何更改的解决方案

<script type="text/javascript">

var changeWatcher = {
    timeout: null,
    currentValue: '',
    watchForChange: function( el ) {
        if( el.value != this.currentValue ) {
            this.changed( el );
        }
        this.timeout = setTimeout( function() {
             changeWatcher.watchForChange(el)
        }, 200 );
    },
    cancelWatchForChange: function() {
        clearTimeout( this.timeout );
        this.timeout = null;
    },
    changed: function( el ) {
        this.currentValue = el.value;
        // do something with the element and/or it's value
        //console.log( el.value );
    }
}

</script>
<input type='text' value='abc' onfocus='changeWatcher.watchForChange(this)' onblur='changeWatcher.cancelWatchForChange()' onchange='changeWatcher.changed(this)' />

Javascript文本框事件

2 个答案: