深入理解DOM事件类型系列第三篇——文本事件
来源:互联网 发布:linux tail f n 100 编辑:程序博客网 时间:2024/06/05 11:15
前面的话
如果DOM结构发生变化,触发的是变动事件;如果文本框中的文本发生变化,触发的是文本事件
HTML5为input控件新增了很多type属性,大大增加了input控件的应用场景。其中一个是type="range"的input控件,可以通过拖动游标改变value值,但并不是所有浏览器都可以实时显示,除了IE10+浏览器
<input type="range" min="0" max="10" step="0.5" value="6" />
那么哪些文本事件可以实时监测游标变化呢?本文将以此为引子详细介绍文本事件
change
说起文本变化,最先想到的可能就是change事件
对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发;对于<select>元素,在其选项改变时触发
<input id="test" value="请改变内容并移除焦点"><script>test.onchange = function(){ test.style.backgroundColor = 'pink';}</script>
只有在IE浏览器下,change事件对游标实时变化起作用;其他浏览器下,必须松开鼠标后,change事件才起作用
<input id="test" type="range" min="0" max="10" value="6" /><span id="result"></span><script>test.onchange = function(){ result.innerHTML = test.value;}</script>
textInput
DOM3级事件引人了一个新事件——textInput,用来替代keypress事件。当用户在可编辑区域中输入字符时,就会触发这个事件
[注意]该事件只支持DOM2级事件处理程序,且只有chrome和safari浏览器支持
textInput与keypress事件有两点不同
【1】textInput事件只会在用户按下能够输入实际字符的键时才会被触发,而keypress事件则在按下那些能够影响文本显示的键时也会触发(如回车键)
【2】任何可以获得焦点的元素都可以触发keypress事件,但只有可编辑区域才能触发textInput事件
<button id="test">按钮</button><script>//控制台只输出1,不输出2test.onkeypress = function(){console.log(1);}test.addEventListener('textInput',function(){console.log(2)})</script>
<input id="test"><script>//控制台以1-2的顺序输出test.onkeypress = function(){console.log(1);}test.addEventListener('textInput',function(){console.log(2)})</script>
由于textInput事件主要考虑的是字符,因此它的event对象中还包含一个dada属性,这个属性的值就是用户输入的字符
比如用户在小写模式下,按下了S键,data值就是's',而如果在大写模式下按下该键,data的值就是'S'
<input id="test"><span id="result"></span><script>test.addEventListener('textInput',function(e){ e = e || event; result.innerHTML = e.data;})</script>
由于<input type="range">的游标并不是可编辑区域,所以,textInput事件对游标变化无作用
input
文本事件中,除了textInput事件,还有一个input事件
HTML5新增了一个input事件,只要输入框内容发生变化就会立即触发,但通过javascript改变value时不会触发
所以这事件与change事件的区别就是不需要移除焦点就可以触发
[注意]该事件IE8-浏览器不支持
<input id="test"><script>test.oninput = function(){ this.style.background = 'pink';}</script>
该事件可以在chrome/safari/firefox/IE9浏览器中,实时监测游标的变化
<input type="range" id="input"><span id="result"></span><script> input.oninput = function(){ result.innerHTML = this.value; }</script>
propertychange
IE有一个专有事件叫propertychange事件,该事件会在设置disable="true"时失效。propertychange触发函数只有一个默认参数,是所有可以触发属性的集合。该事件是在触发对象改变任何属性时都会触发
[注意]IE11浏览器不支持
<input type="range" id="input"><span id="data"></span><script> input.onpropertychange = function(){ data.innerHTML = this.value; }</script>
兼容
如果要使游标变化实现全浏览器兼容,使用input和change事件可以实现
<input type="range" id="test"><span id="result"></span><script>//通过userAgent检测IE浏览器function isIE(){ var ua = navigator.userAgent; //检测Trident引擎,IE8+ if(/Trident/.test(ua)){ //IE11+ if(/rv:(\d+)/.test(ua)){ return RegExp["$1"]; } //IE8-IE10 if(/MSIE (\d+)/.test(ua)){ return RegExp["$1"]; } } //检测IE标识,IE7- if(/MSIE (\d+)/.test(ua)){ return RegExp["$1"]; } }//IE浏览器if(isIE()){ test.onchange = function(){ result.innerHTML = this.value; }//其他浏览器}else{ test.oninput = function(){ result.innerHTML = this.value; }}</script>
最后
如果只考虑游标,而不考虑IE9-浏览器退化成文本框的情况,使用mousemove事件就可以实现实时监控数据变化的需求
- 深入理解DOM事件类型系列第三篇——文本事件
- 深入理解DOM事件类型系列第五篇——文本事件
- 深入理解DOM事件机制系列第三篇——事件对象
- 深入理解DOM事件机制系列第三篇——事件对象
- 深入理解DOM事件类型系列第六篇——加载事件
- 深入理解DOM事件类型系列第六篇——加载事件
- 深入理解DOM事件类型系列第六篇——加载事件
- 深入理解DOM事件类型系列第六篇——加载事件
- 深入理解DOM事件类型系列第二篇——键盘事件
- 深入理解DOM事件类型系列第四篇——加载事件
- 深入理解DOM事件类型系列第五篇——剪贴板事件
- 深入理解DOM事件类型系列第八篇——变动事件
- 深入理解DOM事件类型系列第一篇——鼠标事件
- 深入理解DOM事件机制系列第二篇——事件处理程序
- 深入理解DOM事件机制系列第二篇——事件处理程序
- 深入理解DOM事件机制系列第六篇——事件模拟
- 深入理解DOM事件机制系列第七篇——焦点管理
- 深入理解DOM事件机制系列第一篇——事件流
- Java中文件存储的两种主要形式
- springMVC配置定时任务,并调用service
- String,StringBuffer与StringBuilder的区别?
- java中调用dll文件的两种方法
- quickfixj编程常见问题
- 深入理解DOM事件类型系列第三篇——文本事件
- Android Studio配置SVN详解
- 预印本(Preprint)及出版商的投稿政策
- SSL_1597石子合并问题(动规练习题)
- JAVA中float转换为string
- 蓝桥杯练习题之01字串
- Android | Android系统框架
- iOS11MBProgressHUD无法显示弹窗
- 文章标题