关于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. <input type="text">和<textarea>的区别

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

  3. input[type=text]点击之后无边框, 一进页面就显示光标

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

  4. HTML:<input type="text">文本框不可编辑的方式

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

  5. js让text值不可改变,同<input type="text" readonly="readonly" />

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

  6. <input type="text"/>未输入时属性value的默认值--js学习之路

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

  7. html中去掉文本框(input type="text")的边框或只显示下边框

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

  8. input type =text,按回车键自动提交

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

  9. 对比<input type="text" id="">和<asp:TextBox runat="server" ID="">

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

随机推荐

  1. HDU-2711 Lost Cows

    Lost Cows Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  2. Oracle和MSSQL查询有多少张表

    Oracle: SELECT count(*) FROM user_tables MSSQL: ) FROM sysobjects WHERE xtype='U' 这种方法可能会把dbo.dtprop ...

  3. 去掉有序数组中重复数字 原地 leetcode java (最简单的方法)

    1.利用荷兰国旗的思路,每次记住最后一个位置,遇到一个不重复的数,放在它后面,代码很简单. Given a sorted array, remove the duplicates in place s ...

  4. ubuntu如何跑arm程序

    1. 首先确定一间配置好arm linux 交叉编译器,可以使用arm-linux-gcc. 2. 看示例代码hello.c #include<stdio.h> int add(int a ...

  5. python的import与from...import的不同之处

    在python用import或者from...import来导入相应的模块.模块其实就是一些函数和类的集合文件,它能实现一些相应的功能,当我们需要使用这些功能的时候,直接把相应的模块导入到我们的程序中 ...

  6. 1109 html5 xhtml;

    XHTML 是 XML 风格的 HTML 4.01. HTML5 是下一代 HTML,取代 HTML 4.01. XHTML是基于XML发布的HTML规范,旨在规范HTML的格式. 两者提出的目的是不 ...

  7. canvas 时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解

    其中属性.元素(标签).文本都属于节点 <title></title> <scripttype="text/javascript"> windo ...

  9. 知名IT企业待遇一览表

    115家IT公司待遇一览表       作者是西电通院2013届毕业硕士,依据今年找工作的情况以及身边同学的汇总,总结各大公司的待遇例如以下,吐血奉献,公司比較全.下面绝对是各大公司2013届校招的数 ...

  10. web配置nagios工具

    Nagios是一款开源的免费网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报警第一时间通知网站运维人员, ...