专栏首页向前进【整合】input标签JS改变Value事件处理方法

【整合】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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)

    在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1、金额输入框 2、弹出数字键盘 3、仅支持输入两位小数,限制最大11位数,不允许0开头   后续...

    SmileSmith
  • Http2改造实践:statusText丢失问题

    背景: 1、项目中的nginx由http1.1改造为http2, 2、代码中采用axios的interceptors做统一返回处理,对于系统逻辑性错误弹窗(例如...

    SmileSmith
  • vue-cli脚手架npm相关文件解读(3)webpack.dev.conf.js

    系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

    SmileSmith
  • JS高级测试: 下列函数节流说法不正确的是?

    为什么要函数节流 由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。 比如以下情况: 1. window对象的resi...

    舒克
  • 【Java】基础27:Map集合

    Map,这个单词很多人都认识,不过第一反应应该是“地图”,其实它还有一个意思叫“映射”。

    刘小爱
  • Hive修改字段

       Hive只是传统关系数据库和现在流行的分布式数据库的衍生物,所以在很多方面还不是很成熟。Hive修改字段的时候就会有许多问题产生,比如历史分区的数据会为n...

    幽鸿
  • 40种语言、9项推理任务,谷歌发布新的NLP基准测试Xtreme

    目前,全球存在着超过6900种语言,这是自然语言处理研究者们的巨大噩梦。因为大多数语言都是数据稀疏的,研究者找不到足够多的数据来单独训练成熟模型。

    大数据文摘
  • 使用Kotlin高效地开发Android App(三)

    Kotlin基于Java的空指针提出了一个空安全的概念,即每个属性默认不可为null。

    fengzhizi715
  • 理解 ECMAScript 规范(一)

    在这篇文章中,为我们将会使用规范中的一个小的功能来做为切入点,从中去尝试理解一些特殊操作符,让我们开始吧。

    三毛
  • 借助云开发实现小程序短信验证码的发送

    是不是感觉实现起来特别简单,怎么说呢,我们代码调用其实就这么几行,就可以实现短信的发送,但是腾讯云短信模板的审核比较繁琐,还有我们先去申请短信模板,短信模板审核...

    编程小石头

扫码关注云+社区

领取腾讯云代金券