oninput,onpropertychange,onchange的用法和区别
1、前言
由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”。如下图所示:
因此,稍微研究了一下oninput,onpropertychange,onchange的区别和用法,以及onpropertychange在ie浏览器下的一个bug。
2、oninput,onpropertychange,onchange的用法
l onchange触发事件必须满足两个条件:
a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur);
l onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;
l oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。
3、代码实现:
第一种方法是直接写入textarea的onpropertychange和oninput属性
<textarea id="wb_comment_content" name="wb_comment_content" onblur="blur_wb_textarea(this);" onfocus="click_wb_textarea(this);" onpropertychange="set_alert_wb_comment();" oninput="set_alert_wb_comment();" class="gary666" style="font-size:12px;" mce_style="font-size:12px;">欢迎您每天来微评爱车哦……
如果想要用JavaScript设置textarea的属性,需如下:
if(isIE)
{
document.getElementById("wb_comment_content").onpropertychange = set_alert_wb_comment();
}
else //需要用addEventListener来注册事件
{
document.getElementById("wb_comment_content").addEventListener("input", set_alert_wb_comment, false);
}
其余函数
function click_wb_textarea(obj) { if(obj.value==obj.defaultValue) { obj.value=""; } //obj.className=""; //这样设置类名在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug obj.style.color="#000"; return false; } function blur_wb_textarea(obj) { if(obj.value=="") { //obj.className="gary666"; obj.style.color="#666"; obj.value= obj.defaultValue; } return false; }
4、onpropertychange的bug
在代码实现时,发现在响应用户onclick了textarea时,如果使用obj.className="XX";来改变textarea输入框中字体的样式,会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug,因此需要这样设置:obj.style.color="#000";
oninput,onpropertychange,onchange的用法和区别的更多相关文章
- oninput,onpropertychange,onchange的用法和区别【转载】
1.前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”.如下图所示: 因此,稍微研究了一下oninput,onpropertychange, ...
- 总结oninput、onchange与onpropertychange事件的用法和区别 书写搜索的神奇代码
总结oninput.onchange与onpropertychange事件的用法和区别 最近手机开发一个模糊搜索的功能组建,在网上就找到这篇文章! 前端页面开发的很多情况下都需要实时监听文本框输入,比 ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- oninput,onpropertychange,onchange的使用方法和差别
1.前言 因为工作须要,需实现一个相似于微博输入框的功能,在用户动态输入文字的时候,改动提示“您还能够输入XX字”.例如以下图所看到的: 因此,略微研究了一下oninput,onpropertycha ...
- 监听输入框变化(oninput,onpropertychange,onchange)
oninput,onpropertychange,onchange: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于 ...
- jquery多种方式实现输入框input输入时的onput,onpropertychange,onchange触发事件及区别
有关inputs输入内容的事件监听,一般我们会想到下面几个关键词:onput,onpropertychange,onchange onput与onchange的一个区分 onput:该事件在 < ...
- 总结oninput、onchange与onpropertychange事件的用法和区别,onchange
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 总结oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
随机推荐
- 在ubuntu下利用minicom实现串口通信
windos有串口调试助手,linux下也有这样的工具——minicom.不过,minicom和linux下的许多工具都一样,也是命令行模式,没有图形化界面供我们享受.作为一款串口调试工具,虽然难看但 ...
- 关于OA中权限越级的问题
最近被人问了一个问题, 在OA中我, 经理出差了,下属需要用到 经理的权限,应该怎么处理. 这个问题比较简单,大神,请指点一下. 一开始 ,我就被搞懵了. 我的回答是: 经理出差之前赋给权限就可以了. ...
- codeforces 278Div1 B题
虚拟参赛的时候没想到是线段树,看到很多人都过了,也蛮着急的. 首先用二分+线段树的方法更新DP[i]:它表示以A[i]为结尾可以最前到哪个位置: 再用线段树计算ans[i]:它表示当前i个A元素可以最 ...
- WINDOWS下,中文JSON格式读取报错处理:ValueError: No JSON object could be decoded
File "C:\Python27\lib\json\__init__.py", line 290, in load **kw) File "C:\Python27\li ...
- java中的单例模式与doublecheck
转自: http://devbean.blog.51cto.com/448512/203501 在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单 ...
- ANDROID_MARS学习笔记_S03_001_获取蓝牙匹配列表
一.代码 1.xml(1)AndroidManifest.xml 增加 <uses-permission android:name="android.permission.BLUETO ...
- 【HDOJ】2707 Steganography
简单字符串,读懂题,很容易AC. #include <stdio.h> #include <string.h> ], line[], des[]; int main() { i ...
- ChannelFactory.Endpoint 上的地址属性为空。ChannelFactory 的终结点必须指定一个有效的地址。
主体代码如下 IServiceA proxyA; ChannelFactory<IServiceA> factoryA = new ChannelFactory<IServiceA& ...
- xcode5.1 cocoapods报错
Xcode升级到5.1了,apple默认让所有app都通过64位编译器编译,所以会报各种错误信息,关闭64位编译就好了. 选中Targets—>Build Settings—>Archit ...
- 【Android 复习】:第02期:引导界面(二)使用ViewPager实现欢迎引导页面
一.实现的效果图 也许是养成了这样一个习惯,每次看别人的代码前,必须要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实现的效果类似,有图才有真相嘛,呵呵. 二.编码前的准 ...