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. CentOS下安装Docker

    简介:本篇文章介绍如何在CentOS系统下面安装docker系统. 官方文档:https://docs.docker.com/install/linux/docker-ce/centos/ Docke ...

  2. Tomcat 基础优化

    作者:北京运维 本文档是身边一些朋友.技术大佬之前分享的一些笔记,记录了 Tomcat 优化方法,笔记较多而且比较杂乱,经过整理.分类我个人觉得大致可以从以下几个方面优化 Tomcat: Tomcat ...

  3. 使用sqlyog将sql server 迁移到mysql

    使用软件工具sqlyog(64位) sqlyog 迁移步骤 1.使用sqlyog连接目标数据库 连接目标数据库 2.选择目标数据库(需要先把表结构建好,从SQL Server同步表结构也可以使用工具, ...

  4. stark - 5 ⇲ 其他常用功能

    Ⅰ 排序 当数据量增多,对于数据 我们应该能够指定如何排序的.且此功能应该是可以给用户自定义进行配置的. 这是StarkHandler类的方法1 order_list = [] def get_ord ...

  5. ThinkPHP 5.0.x SQL注入分析

    前言 前段时间,晴天师傅在朋友圈发了一张ThinkPHP 注入的截图.最近几天忙于找工作的事情,没来得及看.趁着中午赶紧搭起环境分析一波.Think PHP就不介绍了,搞PHP的都应该知道. 环境搭建 ...

  6. asp.net 网站在Apache下的配置,就这么简单

    asp.net 网站在Apache下的配置,就这么简单 # # Virtual Hosts # # If you want to maintain multiple domains/hostnames ...

  7. 【Vim】Vim学习

    1. 三种模式 (1)命令模式:刚启动vim便进入命令模式,此时敲击键盘会被当做命令来处理 以下是常用的几个命令: i 切换到插入模式,以输入字符.x 删除当前光标所在处的字符.: 切换到底线命令模式 ...

  8. MySQL 重命名数据库

    首先创建目标库 create database trgdb; 获取所有源库的表名 use information_schema; select table_name from TABLES where ...

  9. jenkins配置构建执行状态

    运行构建 在项目 左侧列表点击 “立即构建” ,在 “Build History” 列表中,会看到执行状态,蓝色圆点表示构建成功,红色圆点表示构建失败 点击 构建失败的任务(红色的小圆点).然后点击“ ...

  10. Ubuntu 16.04 RTL8111/8168/8411 PCI Express Gigabit Ethernet Controller” 不能上网

    来源:http://forum.ubuntu.org.cn/viewtopic.php?f=116&t=463646 1.执行如下命令 uname -a sudo lspci -knn sud ...