DOM3 textInput事件
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事件的更多相关文章
- textInput事件
DOM3级事件引入了 textInput 这个代替keypress的textInput的行为稍有不同 区别 只要可以获得焦点的元素都有keypress事件,但是textInput事件只有文本编辑区域才 ...
- javascript中DOM0,DOM2,DOM3级事件模型解析
DOM 即 文档对象模型. 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容.结构或显示 ...
- JS自定义事件（Dom3级事件下）
原文出处: http://www.w3cfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html . 我拿出作者中的一段,感谢作者原创. ...
- dom0、dom2、dom3事件
https://www.jianshu.com/p/3acdf5f71d5b addEventListener():可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用. removeEven ...
- DOM 事件深入浅出（一）
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- 深入理解DOM事件类型系列第五篇——文本事件
× 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...
- JS中的事件类型和事件属性的基础知识
周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习, 小姨子再也不用担心我的学习啦 ...
- 深入理解JavaScript 事件
本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...
- javaScirpt学习之事件
一.事件的添加和删除 不同浏览器,不同DOM级别,添加和删除事件的方法也不同,具体可以参见后面的EventUtil元素. 二.事件对象 在事件处理程序中,浏览器会为之传入一个event对象,该对象的常 ...
随机推荐
- python接口自动化2-发送post请求详解（二）
前言 发送post的请求参考例子很简单,实际遇到的情况却是很复杂的,首先第一个post请求肯定是登录了,但登录是最难处理的.登录问题解决了,后面都简单了. 一.查看官方文档 1.学习一个新的模块,其实 ...
- leetcode-482-License Key Formatting
题目描述: You are given a license key represented as a string S which consists only alphanumeric charact ...
- JS对Date的扩展，将 Date 转化为指定格式的String
/** * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).12小时(h).24小时(H).分(m).秒(s).周(E).季度(q) 可以用 1-2 个占位符 * ...
- angularJs集成百度地图
app.controller('mapSignController',function($scope,$rootScope,Message, $window,$uibModalInstance){ v ...
- 【VS2015】关于VS2015如何运行的问题
各位看官,lt's been a long time since we met last time. 是否习惯了CodeBlocks那种简易编写C文件?一到写工程就懵逼的状态?今天我给他们带来如何让C ...
- MarkDown添加图片的三种方式
插图最基础的格式就是:  Alt text:图片的Alt标签,用来描述图片的关键词,可以不写.最初的本意是当图片 ...
- Java NIO学习与记录（六）： NIO线程模型
NIO线程模型 上一篇说的是基于操作系统的IO处理模型,那么这一篇来介绍下服务器端基于IO模型和自身线程的处理方式. 一.传统阻塞IO模型下的线程处理模式 这种处理模型是基于阻塞IO进行的,上一篇讲过 ...
- 利用CompletableFuture优化程序的执行效率
一.线程池的Future模式 在了解java8的CompletableFuture之前,先通过Future来解决一个问题,看个例子: 假设现在有一个网站,首页有顶部Banner位.左边栏.右边栏.用户 ...
- java的MethodHandle类详解
一.总述 java7为间接调用方法提供了MethodHandle类,即方法句柄.可以将其看作是反射的另一种方式. 这是使用MethodHandle调用方法的一个例子: public class T ...
- Hadoop2.5.0伪分布式环境搭建
本章主要介绍下在Linux系统下的Hadoop2.5.0伪分布式环境搭建步骤.首先要搭建Hadoop伪分布式环境,需要完成一些前置依赖工作,包括创建用户.安装JDK.关闭防火墙等. 一.创建hadoo ...