DOM3中引入了文本事件,其中之一 textInput 。

当用户再可编辑区域输入字符时触发该事件。

与keypress不同的是,该事件只会在用户输入可视字符时触发,而keypres事件则只要按下键即触发(如CapsLock,Backspace)。

可看到textInput考虑的主要是字符,可以通过事件对象的data属性获取所输入字符。

示例

<!DOCTYPE HTML>
<html>
<head>
<title>DOM3 event textInput</title>
</head>
<body> <input id="ipt" type="text" />
<script type="text/javascript">
function addEvent(el,type,fn){
if(el.addEventListener){
el.addEventListener(type, fn, false);
}else{
el.attachEvent('on' + type, fn);
}
}
var ipt = document.getElementById('ipt');
addEvent(ipt,'textInput',function(e){
e = e || window.event;
console.log(e.data);
});
</script> </body>
</html>

  

目前只有IE9,Chrome,Safari支持。

DOM3 textInput事件的更多相关文章

  1. textInput事件

    DOM3级事件引入了 textInput 这个代替keypress的textInput的行为稍有不同 区别 只要可以获得焦点的元素都有keypress事件,但是textInput事件只有文本编辑区域才 ...

  2. javascript中DOM0,DOM2,DOM3级事件模型解析

    DOM 即 文档对象模型. 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容.结构或显示 ...

  3. JS自定义事件(Dom3级事件下)

    原文出处:  http://www.w3cfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html . 我拿出作者中的一段,感谢作者原创. ...

  4. dom0、dom2、dom3事件

    https://www.jianshu.com/p/3acdf5f71d5b addEventListener():可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用. removeEven ...

  5. DOM 事件深入浅出(一)

    在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...

  6. 深入理解DOM事件类型系列第五篇——文本事件

    × 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...

  7. JS中的事件类型和事件属性的基础知识

    周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习,  小姨子再也不用担心我的学习啦 ...

  8. 深入理解JavaScript 事件

    本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...

  9. javaScirpt学习之事件

    一.事件的添加和删除 不同浏览器,不同DOM级别,添加和删除事件的方法也不同,具体可以参见后面的EventUtil元素. 二.事件对象 在事件处理程序中,浏览器会为之传入一个event对象,该对象的常 ...

随机推荐

  1. 基于注解的Spring容器源码分析

    从spring3.0版本引入注解容器类之后,Spring注解的使用就变得异常的广泛起来,到如今流行的SpringBoot中,几乎是全部使用了注解.Spring的常用注解有很多,有@Bean,@Comp ...

  2. gitLab创建自己的私有库

    一.创建私有库的流程简介 创建一个项目,留着后面的流程3制作私有库 在可以创建私有库的地方创建一个code repository, code repository是代码仓库,我们把代码上传到这个仓库. ...

  3. 半年的iOS代码生活

    半年的iOS代码生活 在高考大军中拼杀过,也在大学校园中荒芜过,曾经低迷消沉,也常满怀壮志…… 但是最多的还是被称为小伙子以及自称为iOS工程师!博主就是这种喜闻乐见的这类人,实习一年后在2015年的 ...

  4. 配置bootstrap环境

    bootstrap是一个优雅,灵活,可扩展的前端工具集,可搭建WEB页面的HTML,CSS,JavaScript工具集,最重要的是它的栅格系统. 这里不做更多的详细介绍具体可参照官方网站:http:/ ...

  5. WC2019退役记

    sb题不会,暴力写不完,被全场吊着打,AFO

  6. Java实现简单井字棋

    Java第一次实验,老师让做一个井字棋,电脑随机下棋. 然后就想能不能聪明一点,可以判断出走哪一步棋:然后只能做到不会输,还是不够聪明,只能呆板地堵住用户,smartRobot的第三个判断逻辑找不到最 ...

  7. 关于 maven 打包直接运行的 fat jar (uber jar) 时需要包含本地文件系统第三方 jar 文件的问题

    关于maven打包fat jar (uber jar) 时需要包含本地文件系统第三方jar文件的问题,今天折腾了一整天.最后还是用了spring boot来做.下面是几篇关于打包的有参考价值的文章,以 ...

  8. Unity3D碰撞触发函数

    首先要给被碰撞物体添加Box Collider,并在Is Trigger打勾 在被碰撞物体的脚本里,添加碰撞检测函数 void OnTriggerEnter(Collider other) { if ...

  9. sql中COUNT(*)、COUNT(字段名)的区别

    数据表:其中IT002的Fname是null. 执行sql: ) FROM T_Employee 结果: 结论:COUNT(*)统计的是结果集的总条数,而COUNT(FName)统计的则是除了结果集中 ...

  10. leetcode5:subsets问题

    问题描述: Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subse ...