zoukankan      html  css  js  c++  java
  • 【整合】input标签JS改变Value事件处理方法

      某人需要在时间控件给文本框赋值时,触发事件函数。实现的效果:

      1、文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件。阻塞在于失去焦点后才触发(输入过程中不触发事件)

      2、通过JS方法修改值,修改后触发事件。重点阻塞在于此(JS赋值要触发)

      

      最终采用方案:

      1、IE(IE8及以下)下使用onpropertychange实现JS赋值后触发事件

      2、需求是手工输入结束后才触发事件,避免在文本框实时输入文字的时候也因为onpropertychange触发事件,在trigger之前判断当前焦点位置。这样onpropertychange就对手工输入无效;

      3、实现手工输入结束后要触发事件,使用onchange事件

      1、其他浏览器中也可以使用onchange模拟输入结束后触发事件,但是没法使用onpropertychange事件。使用定时器模拟效果

      

    <!DOCTYPE HTML> 
    <html> 
    <head>
    <meta http-equiv="Content-Type"; content="text/html; charset=utf-8"> 
    <script type="text/javascript" src="jquery-1.9.1.min.js" charset="utf-8"></script>
    <script>
    function init(){
        //每次点击给不一样的值
        var i=0;
        $("#testchange").on("click",function(){
            $("#name").val(i);
            i++;
        });
        var jsDate = "";
        
        if(document.all){//ie8及以下
            $("#name").on("change",function(){
                console.log(i);//改变值后要触发的代码
            });
            
            $('input[type="text"]').each(function() {
                var that=this;
                if(this.attachEvent) {
                    this.attachEvent('onpropertychange',function(e) {
                        if($("#name").is(":focus")) return;
                        if(e.propertyName!='value') return;
                        debugger;
                        $(that).trigger('change');
                    });
                }
            })
        } else {//非ie和IE9以上
            var intervalName;
            intervalName = setInterval(handle,100);
            function handle(){
                if($("#name").val() != jsDate && !$("#name").is(":focus")){//模拟失去焦点后时才会触发
                    jsDate = $("#name").val();
                    console.log(i + " oninput");//改变值后要触发的代码
                }
            };
        }
    }
    </script>
    </head> 
    <body onload ="init();"> 
        <button id="testchange">JS赋值</button>
        <label>文本框:</label><input type="text" id="name"/>
    </body> 
    </html> 

    总结对比在input标签中onchange、oninput、onpropertychange对比

    onchange:老东西,基本兼容所有浏览器。实现原理为元素得到焦点后开始监听Value,元素失去焦点后对比前后的Value,前后Value不相等时触发。

          适用场景为:输入内容失去焦点后,才触发事件的场景

          注:在查资料的过程中看到有的地方说onchange在非IE8以下的浏览器中会实时监听文本变化,但是我在实际测试中发现并没有实时监听,此处有问题货错误还请指教 :-D

            或者是Jquery的锅? 我测试的代码为  $("#id").on("change",function());

    oninput:html5的标准标签。实现机制为实时监听文本框变化,有变化就触发事件,这个效果在用中文输入法时很奇怪,具体的以后有时间研究。

          适用场景为:文本框输入过程中实时监听输入内容,触发事件

    onpropertychange:IE中元素特有的属性,直接在底层监听元素的属性变化(不止是Value),任何变化都会触发事件,包括适用JS操作

          适用场景为:页面运行期间实时监听元素属性变化,触发事件,特别适用于在IE中JS操作触发事件的场景

    后记:项目原需求的实现其实最好是在控件里面更改,这里做了个奇怪的东西~  权当学习

    参考:

    change,propertychange,input事件小议

    http://www.cnblogs.com/AndyWithPassion/archive/2011/12/18/change_propertychange_input.html

    javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

    http://www.jb51.net/article/25275.htm

    总结oninput、onchange与onpropertychange事件的用法和区别

    http://blog.csdn.net/freshlover/article/details/39050609

    实时监听输入框值变化的完美方案:oninput & onpropertychange

    http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html

  • 相关阅读:
    navBar
    strong ,weak
    Linux基础-07-系统的初始化和服务
    Linux基础-06-vi编辑器
    Linux基础-05-正文处理、tar、解压缩
    Linux基础-04-权限
    Linux基础-03-用户、群组
    Linux基础-02-目录文件管理
    Linux基础-01-Linux基础命令
    oh my zsh 安装
  • 原文地址:https://www.cnblogs.com/smileSmith/p/5858541.html
Copyright © 2011-2022 走看看