博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入理解DOM事件类型系列第五篇——文本事件
阅读量:6090 次
发布时间:2019-06-20

本文共 1270 字,大约阅读时间需要 4 分钟。

前面的话

  如果DOM结构发生变化,触发的是;如果文本框中的文本发生变化,触发的是文本事件

  HTML5为input控件新增了很多type属性,大大增加了input控件的应用场景。其中一个是的input控件,可以通过拖动游标改变value值,但并不是所有浏览器都可以实时显示,除了IE10+浏览器

  那么哪些文本事件可以实时监测游标变化呢?本文将以此为引子详细介绍文本事件

 

change

  说起文本变化,最先想到的可能就是change事件

  对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发;对于<select>元素,在其选项改变时触发

  只有在IE浏览器下,change事件对游标实时变化起作用;其他浏览器下,必须松开鼠标后,change事件才起作用

textInput

  DOM3级事件引人了一个新事件——textInput,用来替代。当用户在可编辑区域中输入字符时,就会触发这个事件

  [注意]该事件只支持DOM2级事件处理程序,且只有chrome和safari浏览器支持

  textInput与keypress事件有两点不同

  【1】textInput事件只会在用户按下能够输入实际字符的键时才会被触发,而keypress事件则在按下那些能够影响文本显示的键时也会触发(如回车键)

  【2】任何可以获得焦点的元素都可以触发keypress事件,但只有可编辑区域才能触发textInput事件

  由于textInput事件主要考虑的是字符,因此它的event对象中还包含一个dada属性,这个属性的值就是用户输入的字符

  比如用户在小写模式下,按下了S键,data值就是's',而如果在大写模式下按下该键,data的值就是'S'

  由于<input type="range">的游标并不是可编辑区域,所以,textInput事件对游标变化无作用

 

input

  文本事件中,除了textInput事件,还有一个input事件

  HTML5新增了一个input事件,只要输入框内容发生变化就会立即触发,但通过javascript改变value时不会触发

  所以这事件与change事件的区别就是不需要移除焦点就可以触发

  [注意]该事件IE8-浏览器不支持

  该事件可以在chrome/safari/firefox/IE9浏览器中,实时监测游标的变化

propertychange

  IE有一个专有事件叫propertychange事件,该事件会在设置disable="true"时失效。propertychange触发函数只有一个默认参数,是所有可以触发属性的集合。该事件是在触发对象改变任何属性时都会触发

  [注意]IE11浏览器不支持

兼容

  如果要使游标变化实现全浏览器兼容,使用input和change事件可以实现

 

最后

  如果只考虑游标,而不考虑IE9-浏览器退化成文本框的情况,使用mousemove事件就可以实现实时监控数据变化的需求

转载地址:http://vymwa.baihongyu.com/

你可能感兴趣的文章
关于加载iframe时进度条不消失的问题
查看>>
oracle ORA-01840:输入值对于日期格式不够长
查看>>
python基础知识~logger模块
查看>>
SIP入门(二):建立SIPserver
查看>>
Servlet3.0的异步
查看>>
WebService连接postgresql( 失败尝试)
查看>>
从头认识java-13.11 对照数组与泛型容器,观察类型擦除给泛型容器带来什么问题?...
查看>>
Python-MacOSX下SIP引起的pip权限问题解决方案(非取消SIP机制)
查看>>
从MFQ方法到需求分析
查看>>
android.view.WindowManager$BadTokenException: Unable to add window
查看>>
HDU5012:Dice(bfs模板)
查看>>
iphone openssh
查看>>
Linux下MEncoder的编译
查看>>
spark高级排序彻底解秘
查看>>
ylbtech-LanguageSamples-PartialTypes(部分类型)
查看>>
福建省促进大数据发展:变分散式管理为统筹集中式管理
查看>>
开发环境、生产环境、测试环境的基本理解和区别
查看>>
tomcat多应用之间如何共享jar
查看>>
Flex前后台交互,service层调用后台服务的简单封装
查看>>
MySQL入门12-数据类型
查看>>