监听输入框变化(oninput,onpropertychange,onchange)
oninput 是 html5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况(IE9+,chorem,safari,firefox2+)。
javascript写法:
在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
<head>
<script type="text/javascript">
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
alert ("The new content: " + event.target.value);
}
// Internet Explorer
function OnPropChanged (event) {
if (event.propertyName.toLowerCase () == "value") {
alert ("The new content: " + event.srcElement.value);
}
}
</script>
</head>
<body>
Please modify the contents of the text field.
<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
</body>
jquery写法(需要引入jquery库):
<script>
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
});
</script>
监听输入框变化(oninput,onpropertychange,onchange)的更多相关文章
- 即时搜索或input实时检测监听输入框变化
js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...
- 【转载】实时监听输入框值变化的完美方案:oninput & onpropertychange
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- asp.net,监听输入框值的即时变化onpropertychange、oninput
作者:自由天堂发布站点:WEB六零零 网页设计制作原文地址:http://www.web600.net/html/editor/JavaScript/201001131529.html 要达到的效果 ...
- 实时监听输入框值变化:oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...
- html5 实时监听输入框值变化的完美方案:oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. H5手机端: <input type="text" ...
- oninput和onpropertychange实时监听输入框值的变化
oninput和onpropertychange实时监听输入框值的变化 传统监听输入框的做法就是使用keyup.keydown.keypress,或者change事件来实现,但keyup.keydow ...
随机推荐
- 【Python】ModuleNotFoundError: No module named 'matplotlib.pyplot'
安装好matplotlib后,很激动的建立了一个文件夹matplotlib,并且在其下面建立了,mpl_squraes.py文件,代码编辑完成以后,点击运行,报错如下: 仔细分析了之后,发现是文件夹名 ...
- 【Python】Python中in与not in
在python中,要判断特定的值是否存在列表中,可使用关键字in,判断特定的值不存在列表中,可使用关键字not in letters = ['A','B','C','D','E','F','G'] i ...
- MSComm串口类的使用 (程序设计)
参考文档:http://wenku.baidu.com/link?url=MLGQojaxyHnEgngEAXG8oPnISuM9SVaDzNTvg0oTSrrJkMXIR_6MR3cO_Vnh-gr ...
- pom.xml基础配置
pom.xml基础配置: maven中,最让我迷惑的还是那一堆配置! 就拿这个属性配置来说: 我需要让整个项目统一字符集编码,就需要设定 <project.build.sourceEncodin ...
- IOS知识点收集
17 duplicate symbols for architecture armv7s 用cocoapods 的时候出现,这种错误一般是由重复引用库文件引起. 原因:自己尝试添加Reachabil ...
- Android常用资源
Eclipse ADT http://developer.android.com/sdk/installing/installing-adt.html https://dl-ssl.google.co ...
- 设计模式之单利模式(C#语言描述,附视频下载地址)
今天来介绍所有设计模式中结构最简单的设计模式单例模式,它的核心结构中只包含一个被称为单例类的特殊类. 要想完成单例类的设计,我们要遵循一下原则即可: 1.一个类只能有一个实例 2.确保该实例对外有一个 ...
- 转:SATA协议简介
SATA协议简介 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/FA99999/article/details/70738724 1.概述 本文档主 ...
- C++ Singleton + MultiThread
#include <iostream> #include <mutex> using namespace std; template <class T> class ...
- Redis源码试读(一)源码准备
这里开始查看Redis的源码,之前是在看Unix的环境编程,虽然这本书写的很好,但是只看这个感觉有点隔靴搔痒.你可以知道沙子.水泥.钢筋的特性,但是要想建一栋大楼仍然是另一回事.Unix环境编程要看, ...