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的用法和区别的更多相关文章

  1. oninput,onpropertychange,onchange的用法和区别【转载】

    1.前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”.如下图所示: 因此,稍微研究了一下oninput,onpropertychange, ...

  2. 总结oninput、onchange与onpropertychange事件的用法和区别 书写搜索的神奇代码

    总结oninput.onchange与onpropertychange事件的用法和区别 最近手机开发一个模糊搜索的功能组建,在网上就找到这篇文章! 前端页面开发的很多情况下都需要实时监听文本框输入,比 ...

  3. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  4. oninput,onpropertychange,onchange的使用方法和差别

    1.前言 因为工作须要,需实现一个相似于微博输入框的功能,在用户动态输入文字的时候,改动提示“您还能够输入XX字”.例如以下图所看到的: 因此,略微研究了一下oninput,onpropertycha ...

  5. 监听输入框变化(oninput,onpropertychange,onchange)

    oninput,onpropertychange,onchange: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于 ...

  6. jquery多种方式实现输入框input输入时的onput,onpropertychange,onchange触发事件及区别

    有关inputs输入内容的事件监听,一般我们会想到下面几个关键词:onput,onpropertychange,onchange onput与onchange的一个区分 onput:该事件在 < ...

  7. 总结oninput、onchange与onpropertychange事件的用法和区别,onchange

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  8. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  9. 总结oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

随机推荐

  1. 在ubuntu下利用minicom实现串口通信

    windos有串口调试助手,linux下也有这样的工具——minicom.不过,minicom和linux下的许多工具都一样,也是命令行模式,没有图形化界面供我们享受.作为一款串口调试工具,虽然难看但 ...

  2. 关于OA中权限越级的问题

    最近被人问了一个问题, 在OA中我, 经理出差了,下属需要用到 经理的权限,应该怎么处理. 这个问题比较简单,大神,请指点一下. 一开始 ,我就被搞懵了. 我的回答是: 经理出差之前赋给权限就可以了. ...

  3. codeforces 278Div1 B题

    虚拟参赛的时候没想到是线段树,看到很多人都过了,也蛮着急的. 首先用二分+线段树的方法更新DP[i]:它表示以A[i]为结尾可以最前到哪个位置: 再用线段树计算ans[i]:它表示当前i个A元素可以最 ...

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

  5. java中的单例模式与doublecheck

    转自: http://devbean.blog.51cto.com/448512/203501 在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单 ...

  6. ANDROID_MARS学习笔记_S03_001_获取蓝牙匹配列表

    一.代码 1.xml(1)AndroidManifest.xml 增加 <uses-permission android:name="android.permission.BLUETO ...

  7. 【HDOJ】2707 Steganography

    简单字符串,读懂题,很容易AC. #include <stdio.h> #include <string.h> ], line[], des[]; int main() { i ...

  8. ChannelFactory.Endpoint 上的地址属性为空。ChannelFactory 的终结点必须指定一个有效的地址。

    主体代码如下 IServiceA proxyA; ChannelFactory<IServiceA> factoryA = new ChannelFactory<IServiceA& ...

  9. xcode5.1 cocoapods报错

    Xcode升级到5.1了,apple默认让所有app都通过64位编译器编译,所以会报各种错误信息,关闭64位编译就好了. 选中Targets—>Build Settings—>Archit ...

  10. 【Android 复习】:第02期:引导界面(二)使用ViewPager实现欢迎引导页面

    一.实现的效果图 也许是养成了这样一个习惯,每次看别人的代码前,必须要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实现的效果类似,有图才有真相嘛,呵呵.           二.编码前的准 ...