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();
    };
     
  • 相关阅读:
    MathType输入框怎么调整
    几何画板中去除画出的线段的教程
    MathType怎么编辑半开半闭区间
    几何画板给月牙图形填充颜色的技巧
    MathType调整矩阵分隔线粗细的方法
    帮你深入理解OAuth2.0协议
    phalapi
    Spring松耦合实例
    让前端工程师糟心的正则表达式到底是什么?
    composer安装
  • 原文地址:https://www.cnblogs.com/grayson/p/6006237.html
Copyright © 2011-2022 走看看