javascript - event对象 - js on方法




输入元素上的javascript更改事件仅在失去焦点时触发 (4)

我有一个输入元素,我想继续检查内容的长度,每当长度变得等于特定大小,我想启用提交按钮,但我遇到的问题是javascript的onchange事件作为事件仅当输入元素超出范围而不是内容更改时才触发。

<input type="text" id="name" onchange="checkLength(this.value)" />

---- onchange不会在更改名称内容时触发,但仅在名称失焦时触发。

我能做些什么来使这个事件能够改变内容吗? 还是我可以使用的其他事件? 我通过使用onkeyup函数找到了一种解决方法,但是当我们从浏览器的自动完成程序中选择一些内容时,这并没有触发。

我希望通过键盘或鼠标来改变字段内容时可以使用的东西...任何想法?


用jQuery方式做:

<input type="text" id="name" name="name"/>


$('#name').keyup(function() {
  alert('Content length has changed to: '+$(this).val().length);
});

作为对katspaugh的回答的扩展,这是使用css类为多个元素执行此操作的方法。

   $('.myclass').each(function(){
        $(this).attr('oldval',$(this).val());
   });

   $('.myclass').on('change keypress paste focus textInput input',function(){
       var val = $(this).val();
       if(val != $(this).attr('oldval') ){
           $(this).attr('oldval',val); 
           checkLength($(this).val());
        }
    });

如果你想抓住每种可能性,你必须使用onkeyuponclick (或onmouseup )的组合。

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />

这是我针对同样问题开发的另一种解决方案。 但是我使用了很多输入框,因此我将旧值保留为元素本身的用户定义属性:“data-value”。 使用jQuery很容易管理。

        $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
            var self = e.data.self;

            if (e.keyCode == 13) {
                e.preventDefault();
                $(this).attr('data-value', $(this).val());
                self.filterBy(this, true)
            }
            else if (e.keyCode == 27) {
                $(this).val('');
                $(this).attr('data-value', '');
                self.filterBy(this, true)
            }
            else {
                if ($(this).attr('data-value') != $(this).val()) {
                    $(this).attr('data-value', $(this).val());
                    self.filterBy(this);
                }
            }
        });

这里是,我用5-6个输入框有类'filterBox',我使filterBy方法只在数据值不同于它自己的值时运行。





javascript-events