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. Win10内部更新：警告用户别用chrome和Firefox

    简评:别和 Chrome 和 Firefox 约行不,我 Edge 明明更美.屁股更翘.更性感... 微软正在测试 Windows 10 的一个更新:警告用户不要安装 Chrome 和 Firefox ...

  2. Python的垃圾回收机制以及引用计数

    Python中的计数引用 在Python中,由于Python一门动态的语言,内部采用的指针形式对数据进行标记的,并不像c/c++那样,通过指定的数据类型并分配相应的数据空间,Python中定义的变量名 ...

  3. 线索二叉树的理解和实现(Java)

    线索二叉树的基本概念 我们按某种方式对二叉树进行遍历,将二叉树中所有节点排序为一个线性序列,在该序列中,除第一个结点外每个结点有且仅有一个直接前驱结点:除最后一个结点外每一个结点有且仅有一个直接后继结 ...

  4. Junit 测试exception

    有两种方法: 一.使用ExpectedException 仅在junit4.7以上支持.不仅可以测试捕获到某异常,也可以测试异常message. 使用例子如下: @Rule public Expect ...

  5. UITableView 头部效果/放大/移动跟随效果

    [self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOp ...

  6. mysqladmin常用用法

    mysqladmin 工具的使用格式:mysqladmin [option] command [command option] command ...... 参数选项: -c number 自动运行次 ...

  7. anyncTask的3个参数（从源码可以发现其中使用了ThreadPoolExcuter线程池）

    AnyncTask异步处理数据并将数据应用到视图的操作场合 一  其中包含这几个方法 1 onPreExcute() 初始化控件,例如进度条2 doInBackground() 具体的执行动作请求数据 ...

  8. Redis快照持久化

    Redis的持久化功能: redis为了内部数据的安全考虑,会把本身的数据以文件的形式保存到硬盘中一份,在服务器重启之后会自动把硬盘的数据恢复到内存(redis)里边. 数据保存到硬盘的过程就被称为” ...

  9. 安装win7 64位和win10 64位双系统小结

    1.gpt比mbr更先进.与主启动记录 (MBR) 分区方法相比,GPT 具有更多的优点,因为它允许每个磁盘有多达 128 个分区(mbr只支持4个分区),支持高达 18 千兆兆字节的卷大小,允许将主 ...

  10. PHP 判断字符串 是否 包含另一个字符串

    1.stristr 忽略大小写 $string = 'Hello World!'; if(stristr($string, 'earth') === FALSE) { echo '"eart ...