`
zhouyrt
  • 浏览: 1162372 次
  • 性别: 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标准中新增加的js textInput文本事件时，我们首先要明确它是在什么背景下被引入的，以及它与之前事件有什么区别和联系。DOM3标准，即文档对象模型级别3标准，它是对DOM技术的进一步扩展，旨在提供更加丰富...

    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 ...

    dom4jdemo例子

    rootElement.addElement("child").addText("Hello, DOM4J!"); ``` 2. **读取XML文件**： ```java File inputFile = new File("input.xml"); Document document = DocumentHelper.parseText(FileUtils.readFile...

    dom4j使用

    DOM4J是一个Java库，它为XML处理提供了强大的功能，包括文档构建、查询、转换和事件处理。作为一个开源项目，DOM4J被广泛应用于各种Java应用中，尤其在处理大型XML文档时，其性能优势明显。 DOM4J的核心概念包括...

    dom4j dom4j实例

    - DOM4J还支持命名空间（Namespaces）、事件驱动的处理（Event API）、XSLT转换等高级功能。 - 它也提供了方便的API来处理XML Schema，如创建和验证XML文档的结构。 - 与其他Java XML库（如JDOM、JAXB）的兼容性...

    dom4j 简单教程

    Document document = reader.read(new File("input.xml")); ``` **步骤3：遍历元素** ```java Element rootElement = document.getRootElement(); List&lt;Element&gt; elements = rootElement.elements(); for ...

    jQuery 选择器、DOM操作、事件、动画

    3. 事件 jQuery简化了JavaScript事件处理。它将常见事件封装为可链式调用的方法，例如`.click()`、`.hover()`、`.focus()`和`.blur()`等。 - 事件命名约定：事件方法的命名通常以“on”为前缀，如`click()`、`...

    WEB开发 之 JavaScript HTML DOM 事件.docx

    3. **HTML DOM事件分配**：除了通过HTML属性设置事件，还可以使用JavaScript动态地为元素添加事件监听器。例如，通过`getElementById`方法获取元素并设置`onclick`事件： ```javascript document.getElementById('...

    text_input_controller.rar_Giving

    在IT行业中，文本输入控制器（Text Input Controller）是网页开发中的一个重要组件，它与浏览器的交互密切相关，特别是在处理各种插件的文本输入状态时。在本案例中，我们讨论的"**text_input_controller.rar_Giving...

    一写小例子,dom4J,dom,jdom,sax解析和创建XML文件,代码虽然简单，但是功能实现，适合入门

    SAX是一种事件驱动的解析器，它在解析XML时触发事件，如开始元素、结束元素等。这种方式节省内存，适合处理大型XML文件，但编程模型相对复杂。 ```java import org.xml.sax.Attributes; import org.xml.sax....

    dom4j解析天气预报

    使用DOM4J解析XML文件，你可以轻松地查找、添加、删除和修改XML元素，而无需处理低级别的事件或节点遍历。 下面，我们将通过一个具体的例子探讨如何使用DOM4J解析天气预报的XML文件。假设我们有一个名为"weather_...

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