oninput,onpropertychange,onchange的用法和区别

最新推荐文章于 2023-11-25 00:34:36 发布

weixin_30399797

最新推荐文章于 2023-11-25 00:34:36 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/daisy-hust/p/4958741.html

本文介绍了如何使用onpropertychange和oninput事件实现输入框内容变化时的实时筛选功能。通过具体的HTML和JavaScript代码示例，展示了如何针对不同浏览器选择合适的事件以达到预期效果。

如图所示，我想在搜索框实时筛选下面选项内的选项，

开始想到用onchange事件，但是该事件是在搜索框（input）失去焦点时,切当前对象属性发生改变时触发。

我是需要只要内容改变就触发筛选函数，所以onchange对我这个并不实用。

因此查阅相关事件：

oninput,onpropertychange,onchange的用法：

　　（1）lonchange触发事件必须满足两个条件：

　　　 a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）

　　　　b）当前对象失去焦点(onblur)；

　　（2）onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；

　　（3）oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

我的需求是只要只改变就马上触发，所以用了onpropertychange和oninput事件

html元素中添加两个事件

<input id="search_input" oninput="searchUserList(this.value);" onpropertychange="searchUserList(this.value);" placeholder="搜索"/>

js中添加筛选函数

/**
 * 当驳回、改派、加签...时
 * 根据搜索框内容，过滤人员列表
 */
var searchUserList = function(value){
    
    var $userList = $('#userList').find('.contact_person').find('span');//获取人员列表
    //$userList.closest('.contact_person').css('display', 'block');
    
    $userList.each(function(index, elem){
        
        $(this).closest('.contact_person').css('display', 'block');
    })
    
    $userList.each(function(index, elem){
        
        if($(this).text().indexOf(value) == -1){//含有该搜索字符串
            $(this).closest('.contact_person').css('display', 'none');
        }
    })
};