zoukankan      html  css  js  c++  java
  • input标签内容改变的触发事件

    1. onchange事件与onpropertychange事件的区别:

      onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发;onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有。

    2. oninput事件与onpropertychange事件的区别:

      oninput事件是IE之外的大多数浏览器支持的事件,在value改变时实时触发,但是通过js改变value时不会触 发;onpropertychange事件是任何属性改变都会触发,而oninput却只在value改变时触发,oninput要通过 addEventListener()来注册,onpropertychange注册方法与一般事件相同。

    3. oninput与onpropertychange失效的情况:

    oninput事件:

      (1)当脚本中改变value时,不会触发;

      (2)从浏览器的自动下拉提示中选取时,不会触发;

    onpropertychange事件:

      当input设置为disable=true后,不会触发

    其实对于一般的input标签;只要用下面的代码就能实现;但是对于使用了日期插件的就不能用了:

     <input placeholder="生效月份" id="SXYF" name="SXYF"    class="form-control" type="text" onFocus="WdatePicker({el: 'SXYF',dateFmt:'yyyy-MM',skin:'whyGreen'});" readonly="readonly" value="" onchange="handle()">

    方案一:

    $("#id").keyup(function(){
        alert("bingo");
    });

    方案二:

    //对于有日期插件的怎么办呢:下面来解决:::

     <input placeholder="生效月份" id="SXYF" name="SXYF"    class="form-control" type="text" onFocus="WdatePicker({el: 'SXYF',dateFmt:'yyyy-MM',skin:'whyGreen'});" readonly="readonly" value="" onchange="handle()">

     var starttime= document.getElementById("SXYF");
       if("v"=="v") { //判断浏览器是否是IE
           starttime.onpropertychange = handle;
       }else{
           starttime.addEventListener("input",handle,false);
       }

    方案三:

     <input placeholder="生效月份" id="SXYF" name="SXYF"    class="form-control" type="text" onFocus="WdatePicker({el: 'SXYF',dateFmt:'yyyy-MM',skin:'whyGreen'});" readonly="readonly" value="" onpropertychange="handle()">

    //firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。
       if(/msie/i.test(navigator.userAgent))    //ie浏览器
       {
           document.getElementById('SXYF').onpropertychange=handle
       }
       else
       {//非ie浏览器,比如Firefox
           document.getElementById('SXYF').addEventListener("input",handle,false);

       function handle()
           {

              alert("bingo);

           }

    扩展:

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

  • 相关阅读:
    JAVA网络编程-IP组播
    Centos7安装Node
    Android Studio解决support-annotations版本冲突
    Wordpresss建站笔记:英文模板出现中文如何解决?
    Win10系统下插入耳机前面板无声后面板有声的处理(二)
    webstorm编辑器html浏览器快捷浏览按键图标消失的处理
    近期的感想
    Octet string 解析
    SSH隧道:端口转发功能详解
    uint, not []uint8
  • 原文地址:https://www.cnblogs.com/wushuishui/p/4329894.html
Copyright © 2011-2022 走看看