`
zhouyrt
  • 浏览: 1125593 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DOM3 textInput事件

ChromeSafariJavaScriptHTML 
阅读更多

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支持。

 

 

1
顶
1
踩
分享到：
| 克隆JS对象的三个实用方法
评论
1 楼 libmw 2010-12-17  
感觉就是一个新的时间，实现机制跟以前的事件都差不多
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DOM3中的js textInput文本事件

    DOM3中引入了文本事件，其中之一 textInput 。当用户再可编辑区域输入字符时触发该事件。

    HTML DOM基础教程（网页形式）

    HTML DOM DOM 首页 DOM 简介 DOM 节点 DOM 节点树 ...DOM Input Text DOM Link DOM Meta DOM Object DOM Option DOM Select DOM Style DOM Table DOM TableCell DOM TableRow DOM Textarea

    vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没办法取到相应对象的，必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接...input type=text v-model=item.val style=width:40px&gt;

    KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定

    textInput绑定目的 textInput绑定主要用于&lt;input&gt;或者&lt;textarea&gt;元素。他提供了DOM和viewmodel的双向更新。不同于value绑定，textinput绑定是实时更新的。 例如： 源码： &lt;p&gt;Login name: &lt;input ...

    dom4j api 参考手册

    org.dom4j.io Provides input and output via SAX and DOM together with writing dom4j objects to streams as XML text. org.dom4j.jaxb org.dom4j.rule A Pattern based XML rule engine which implements the ...

    qunit-dom：QUnit的高级DOM断言

    qunit-dom 高级DOM断言 assert . dom ( 'h1' ) . exists ( ) ;... dom ( 'input' ) . isFocused ( ) ; assert . dom ( 'input' ) . hasValue ( /. + Doe/ ) ; assert . dom ( 'input' ) . hasAttr

    input-methods:记录各种输入法IME及其触发的事件

    输入法介绍该存储库的目的是记录各种输入法/ IME，如何安装它们以及它们在浏览器中触发的UI事件。 UI事件查看器，可在此处找到： 可使用本机DOM API或... Chrome会收到类型为textInput的事件。 由于某些原因， input

    jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果

    input type=”text” id=”address” value=”请输入邮箱地址”/&gt; jquery代码： 代码如下: $(document).ready(function(){ $(‘#address’).focus(function(){ var add_value=$(this).val(); if(add_value==”请...

    dom-delegation-stream:与委托一起流式处理dom事件

    body , 'input' , 'input[type=text]' ) . pipe ( values ( ) ) . pipe ( wherever ( ) ) 原料药 events（element，eventName [，选择器，选项]）-&gt; ReadableStream 如果提供了选择器，则将使用委托，否则将不...

    dom-autofocus:进入dom时聚焦一个元素

    自动对焦 进入dom时聚焦一个元素 为什么？ 因为autofocus属性仅在页面加载时起作用。 挂载元素后，此模块立即使用调用.focus() 。 安装 npm install dom-autofocus ... input type =" text " &gt; ` ) } &lt;/ body

    object_dom:HTML对象声明性Dom

    object_dom ...SubmitInput，TextInput，FileInput，NumberInput EmailInput，ColorInput，PhoneInput 表格，表格行，表格标题，表格脚，表格体 HeaderCell，单元格，标题，TableColumn，TableColumnG

    使用dom4j.doc

    Document document = reader.read(new File("input.xml")); 2.解析XML形式的文本,得到document对象. String text = "&lt;members&gt;&lt;/members&gt;"; Document document = DocumentHelper.parseText(text); 3.主动...

    react.js 获取真实的DOM节点实例(必看)

    为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。...input type="text" ref="myTextInput" /&gt; &lt;input type="button" value="Focus t

    dom4-j1.6.1

    "input.xml"&#41;); 2.解析XML形式的文本,得到document对象. String text = "&lt;members&gt;&lt;/members&gt;"; Document document = DocumentHelper.parseText(text); 3.主动创建document对象. Document document = ...

    jQuery中Dom的基本操作小结

    jquery中各个节点的基本操作 代码如下:&lt;!DOCTYPE html PUBLIC “-/...&lt;meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″&gt;&lt;head&gt; &lt;...jquery中的Dom操作&lt;/title&gt; &lt;sc

    vue中的ref和$refs的使用

    如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。 ref 有三种用法： 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 ...input type=textref=TEXT/ &gt; &lt;button @click=add&gt;

    EnField:动态 HTML DOM 映射变量生成器

    input type="text" id="name" placeholder="Name"&gt; &lt;input type="email" id="email" placeholder="EMail"&gt; &lt;input type="number" id="mobile_number" placeholder="Mobile Number"&gt; ...... 您需要将...

    jquery中dom操作和事件的实例学习-表单验证

    input type=”text” id=”username” class=”required”/&gt; &lt;/div&gt;&lt;/form&gt; jquery代码： 代码如下: [removed] $(function(){ $(‘form :input’).blur(function(){ var $parent=$(this

    jQuery详细教程

    选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 &lt;p&gt; 元素。 $("p.intro") 选取所有 class="intro" 的 &lt;p&gt; 元素。 $("p#demo") 选取 ...

Magicbox
Global site tag (gtag.js) - Google Analytics