关于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. 格式化URL

    //格式化url查询参数为json function formatUrl(url){ var reg=/(?:[?&]+)([^&]+)=([^&]+)/g; var data ...

  2. CSDN被黑几年后 我决定继续blogs

    CSDN被黑几年后 我决定继续blogs 可惜了我那么多年的文章,全没了 希望这个博客顺风顺水---2015-12-23

  3. final效率分析

    1. 被final修饰的类 public final class FinalClass { public void getJava() { String str1 = "Java " ...

  4. 关于RGB转换YUV的探讨与实现

    最近在Android手机上使用相机识别条形码工作取得了比较理想的进展,自动识别功能基本完成,然而在手动识别指定条形码图片时遇到困难,由于Zxing开源Jar包识别图片的颜色编码式为YUV,而普通的图片 ...

  5. backpropagate

    http://blog.csdn.net/celerychen2009/article/details/8964753

  6. Android时间互换代码

    收藏备用. http://www.oschina.net/code/snippet_575610_22694 /** * 获取现在时间 * * @return 返回时间类型 yyyy-MM-dd HH ...

  7. 征服 Redis + Jedis + Spring (三)—— 列表操作【转】

    一开始以为Spring下操作哈希表,列表,真就是那么土.恍惚间发现“stringRedisTemplate.opsForList()”的强大,抓紧时间恶补下. 相关链接: 征服 Redis 征服 Re ...

  8. cocos2d-x 2.1.4学习笔记之HelloWorld分析

    下面截图是HelloWorld项目下的文件夹结构 这是用python命令生成的项目,在创建过程中默认生成多个平台的程序文件. 1.“resource”文件夹 该文件夹主要用于存放游戏中需要的图片.音频 ...

  9. cookie 和 HttpSession

    保存会话数据的两种技术 Cookie Cookie 是客户端技术,程序把每个用户的数据以cookie的形式写给用户的浏览器.当用户使用浏览器再去访问服务器中的web资源时,就会带着各自的数据去.web ...

  10. Linux学习笔记总结--CentOS 设置静态IP

    1.修改网卡配置 vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 #描述网卡对应的设备别名,例如ifcfg-eth0的文件中它为eth ...