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

时间:2021-11-03 00:10:05
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();
};
 

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

  1. jQuery监听文本框值改变触发事件(propertychange)

    完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  2. &lt&semi;input type&equals;&quot&semi;text&quot&semi;&gt&semi;和&lt&semi;textarea&gt&semi;的区别

    在我们开发时经常需要用到输入框,通常解决办法就是<input type="text">和<textarea>,那么这两个标签有什么区别呢?  一:<i ...

  3. input&lbrack;type&equals;text&rsqb;点击之后无边框&comma; 一进页面就显示光标

    1.input[type=text]点击之后无边框 :outline:none; 2. 一进页面就显示光标: <script Language="javascript"&gt ...

  4. HTML:&lt&semi;input type&equals;&quot&semi;text&quot&semi;&gt&semi;文本框不可编辑的方式

    1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本 ...

  5. js让text值不可改变,同&lt&semi;input type&equals;&quot&semi;text&quot&semi; readonly&equals;&quot&semi;readonly&quot&semi; &sol;&gt&semi;

    <input type="text" size="60"  name="j01" value="www.52jscn.com ...

  6. &lt&semi;input type&equals;&quot&semi;text&quot&semi;&sol;&gt&semi;未输入时属性value的默认值--js学习之路

    在百度ife刷题是自己的一个错误引发了我对<input type="text"/>的学习. 先贴代码: <!DOCTYPE html> <html&g ...

  7. html中去掉文本框&lpar;input type&equals;&quot&semi;text&quot&semi;&rpar;的边框或只显示下边框

    去掉: <input   type="text"   name="textfield"   style="border:0px;"&g ...

  8. input type &equals;text,按回车键自动提交

    1.当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交 <form id='form1' ac ...

  9. 对比&lt&semi;input type&equals;&quot&semi;text&quot&semi; id&equals;&quot&semi;&quot&semi;&gt&semi;和&lt&semi;asp&colon;TextBox runat&equals;&quot&semi;server&quot&semi; ID&equals;&quot&semi;&quot&semi;&gt&semi;

    首先这两个都是对应文本输入框形式: <input type="text"class="form-control"id="txt_add_pro_ ...

随机推荐

  1. 在 ML2 中配置 VXLAN - 每天5分钟玩转 OpenStack(110)

    上一节我们介绍了 VXLAN 的基本概念,今天介绍如何在 ML2 中启用 VXLAN. 在 /etc/neutron/plugins/ml2/ml2_conf.ini 设置 vxlan network ...

  2. soundtouch变速wsola算法之改进

    soundtouch变速算法很类似sola算法,细看才知道是wsola算法. 上个星期有个需求,将该变速应用到直播的包处理,有点类似于webrtc的netEQ处理机制. 直接使用soundtouch, ...

  3. freemarker 数据做加减计算

    controller的部分: @Controller@RequestMapping("/ContactsFrameIndex")public class ContactsFrame ...

  4. LeetCode----263&period; Ugly Number&lpar;Java&rpar;

    package isUgly263; /* * Write a program to check whether a given number is an ugly number. Ugly numb ...

  5. 213&period; House Robber II

    题目: Note: This is an extension of House Robber. After robbing those houses on that street, the thief ...

  6. Actor模型&lbrack;转&rsqb;

    原文链接:http://blog.jeoygin.org/archives/477 Actor这个模型由Carl Hewitt在1973年提出,Gul Agha在1986年发表技术报告“Actors: ...

  7. 谦先生的程序员日志之我的hadoop大数据生涯一

    从一个初级程序员到高级程序员的经历 你好!我是谦先生,我是茫茫程序猿中的一猿,平凡又执着. 刚入行的时候说实话,啥都不懂,就懂点皮毛的java,各种被虐狗的感觉.又写js又写css又写后台...慢慢被 ...

  8. Leetcode题解(十七)

    48.Rotate Image 题目: 分析:题目意思很简单,就是将一个n*n的矩阵顺时针旋转90度. 这道题难度不大,按照旋转的过程走一遍即可.代码如下: class Solution { publ ...

  9. 牛客网编程练习之PAT乙级&lpar;Basic Level&rpar;:1041 说反话

    直接分隔取反即可 AC代码: import java.util.Scanner; /** * @author CC11001100 */ public class Main { public stat ...

  10. Python3 tkinter基础 TK title 设置窗体的标题

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...