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" οnblur="blur_wb_textarea(this);" οnfοcus="click_wb_textarea(this);" onpropertychange="set_alert_wb_comment();" οninput="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,onprope ...
- 实时监听输入框值变化的完美方案:oninput onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange 原文:实时监听输入框值变化的完美方案:oninput & onpropertychange 在 W ...
- 在ASP.NET MVC中加载部分视图的方法及差别
在视图里有多种方法可以加载部分视图,包括Partial() .Action().RenderPartial().RenderAction().RenderPage()方法.下面说明一下这些方法的差别. ...
- input文本框的oninput和onchange失效
1. 当input中value值被js修改后,此时input的oninput和onchange失效 解决: <input type="text" /> <butt ...
- 【转】总结oninput、onchange与onpropertychange事件的用法和区别
经本人测试在chrome下的从历史记录中选取值的时候也户触发input事件 前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过 ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- Request的getParameter和getAttribute方法的差别
HttpServletRequest.getParameter("modelName");能取到想要的modelObject吗?经过測试之后.发现是不能的. 后来想想.其它道理挺简 ...
- 表单oninput和onchange事件区别
oninput事件是元素value发生变化是立刻触发,而onchange是元素发生变化并且失去焦点时才会触发. 转载于:https://www.cnblogs.com/ykli/p/9565601.h ...
- oninput和onchange区别
1.oninput事件是在输入框中输入时就会触发,该事件在<input>或<textarea>元素的值发送改变时触发. 2.onchange事件是在输入框输入完内容后,输入框失 ...
最新文章
- 使用forName动态加载类文件
- Nexenta和ParaScale发布开源存储产品
- QQ 相册后台存储架构重构与跨 IDC 容灾实践
- 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计
- python dict函数key_python的dict判断key是否存在的方法
- 【uoj#37/bzoj3812】[清华集训2014]主旋律 状压dp+容斥原理
- 黑龙江对口学计算机上机,2009年黑龙江省职高对口升学计算机应用专业技能试卷十.doc...
- linux 进程 命令 cat,Linux cat命令详解
- 计算图像的直方图,求峰值点
- qmenubar 添加按钮_QMenuBar,QMenu和QAction(QMenuBar, QMenu QAction)
- 游戏里的---Change
- sql概述_SQL Notebook简介和概述
- 【项目实践】充电台灯电路拆解
- 基于简单协同过滤推荐算法职位推荐系统
- 魔域mysql下载_魔域单机版下载-魔域单机版 登录补丁+私服补丁+SQL下载 (附GM命令大全)-KK下载站...
- 华为外包员工是什么样的群体?
- Node.js潮牌官网 毕业设计-附源码 010955
- 后端开发工程师不懂这些就危险了
- 别人笑我太疯癫,我笑别人看不穿
- Mybatis 查询 List作为参数查询 条件中有多个参数,foreach in 查询
热门文章
- linux mount挂载大小,Linux中mount挂载问题小结
- java获取当前时间星期几_java怎么获取当前日期是星期几
- vue怎么编辑已有视频_手机制作短视频、VLOG用啥App?~~
- 跳转,location.href,window.open(),load加载页面,iframe加载页面,兼容相关
- CSShack,CSS hack
- SQL Server 2008内存性能监控
- ReadProcessMemory函数的分析
- 构建ASP.NET网站十大必备工具
- 一起学习Windows Phone7开发(十八. Windows Phone7 Toolkit)
- Node.js listen EADDRINUSE 错误解决 How to solve nodejs Error: listen EADDRINUSE