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();"。做购物车页面时会要用到。

时间: 2024-10-17 06:27:52

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

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

1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本框内容“姓名”呈灰色显示. 2.<input type="text" name="name" value="姓名" readonly="readonly" /> 文本框正常显示,只是无法获得光标,不能编辑. 3.<

html中去掉文本框(input type=&quot;text&quot;)的边框或只显示下边框

去掉: <input   type="text"   name="textfield"   style="border:0px;">只留下边框: <input type="text" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: solid&

&lt;input type=&quot;text&quot;/&gt;未输入时属性value的默认值--js学习之路

在百度ife刷题是自己的一个错误引发了我对<input type="text"/>的学习. 先贴代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>example</title> </head> <body> <label for="weather_input"

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

1.当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交 <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 再添加一个<input type="text"/>按下回车将不会自动提交,但是页面上显示一个不知所云的输入

ajaxfileupload.js结合input[type=file]无刷新上传

jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 说明: 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,fileElementId  需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,data

JQuery获取input type=&quot;text&quot;中的值的各种方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQuery获取文本框的值</title> <meta http-equ

ie7下的&lt;input type=&quot;text&quot;&gt;高度

之前很少去做低版本浏览器兼容,由于公司为一些使用低版本浏览的客户着想,所以并没有抛弃IE7.当时做页面的时候我用的是bootstrap,但是很可惜的是不兼容IE7,当使用IETester中的ie7查看页面的时候页面错乱,内容部分消失.我只好根据页面当时情况进行调整,当我设置<input type="text">的时候,我发现给的高度跟实际的不符合,后来仔细观察发现,ie7下的<input type="text">是你给的高度+padding,

自定义标签&lt;INPUT type = &quot;text&quot;&gt;什么样的写法可以让入力框中的值居右显示

<style type="text/css">input{text-align:right;}</style><form><input type="text" /><form>这样为input标签添加一个简单的css样式就可以了.使用text-align:left/center/right; 其中之一就可以调整文本的位置.

使用freemarker模板引擎,后台返回的时间格式(datetime类型)无法显示在input type=&quot;text&quot;中显示

详情: 在使用freemarker是,在后台查出user,其中有入职时间entryDate(date类型),当我想要将 entryDate 显示在 <input type="text" value="${user.entryDate}"/>时,出现错误,无法显示 显示页面: 原因: 因为freemarker无法确定用那种格式来显示这个时间 解决办法: 在 <input type="text" value="${user