zoukankan      html  css  js  c++  java
  • html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。



    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="select();"。做购物车页面时会要用到。
    • input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange:
    1、onchange事件与onpropertychange事件的区别:
    onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;onpropertychange事件却是实时触发,即每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件IE专有。
    2、oninput事件与onpropertychange事件的区别:
    oninput事件是IE之外的大多数浏览器支持的事件,在value改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发;onpropertychange事件是任何属性改变都会触发的,而oninput却只在value改变时触发,oninput要通过addEventListener()来注册,onpropertychange注册方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容与行为分离)
    3、oninput与onpropertychange失效的情况:
    (1)oninput事件:a). 当脚本中改变value时,不会触发;b). 从浏览器的自动下拉提示中选取时,不会触发。
    (2)onpropertychange事件:当input设置为disable=true后,onpropertychange不会触发。

    代表用法:
    var oInput_text = document.getElementsByTagName('input');
    oInput_text.oninput = function(){
      alert('你要动我??');
    };
    
    
    
     
    • 文本框的点击全选状态onclick="select();"

    用法1:直接html标签里添加:<input type="text" onclick="select();" value="点击全选">

    用法2:js添加点击属性:        

    var oInput_text = document.getElementsByTagName('input');
    oInput_text.onclick = function(){ oInput_text.select();
    };
     
  • 相关阅读:
    每日总结3.8
    Go中定时器实现原理及源码解析
    Go语言实现布谷鸟过滤器
    详解Go语言调度循环源码实现
    Go语言中时间轮的实现
    详解Go语言I/O多路复用netpoller模型
    详解Go中内存分配源码实现
    Go中由WaitGroup引发对内存对齐思考
    【分享】java精品实战教程
    nginx实战教程
  • 原文地址:https://www.cnblogs.com/grayson/p/6006237.html
Copyright © 2011-2022 走看看