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();
    };
     
  • 相关阅读:
    接口方法上的注解无法被@Aspect声明的切面拦截的原因分析
    SpringBoot整合Netty
    简单的RPC框架
    基于redis的分布式锁的分析与实践
    8种方案解决重复提交问题
    领券中心项目,如何用 Redis 做实时订阅推送的?
    IM(即时通讯)服务端(二)
    IM(即时通讯)服务端(一)
    0xC00000FD: Stack overflow (parameters: 0x00000000, 0x003E2000).错误
    int (*a)[10]和int *a[10]的区别
  • 原文地址:https://www.cnblogs.com/grayson/p/6006237.html
Copyright © 2011-2022 走看看