oninput,onpropertychange,onchange的用法

1、onchange触发事件必须满足两个条件:

a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)

b)当前对象失去焦点(onblur);

2、onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;

3、oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。

好吧让我们来做个例子吧:

经常在SNS中看到如下图所示的功能:

请通过代码完成它,它至少应该:
1. 良好结构、语义化的HTML
2. 兼容主流的浏览器;
3. JS应该包括: 1) 实时计数功能 2)校验字数限制 3) 防止重复提交;

解答:

<form id="form1" action="" method="post">
<div class="numbox"><b id="num"></b>/1500</div>
<textarea id="message" maxlength=1500 style="width:200px;height:100px">1500字以内</textarea>
<input type="submit" name="submit" id="ok">发布</input>
</form>
<script>
var form=document.getElementById('form1');
var button=document.getElementById('ok');
var textbox=document.getElementById('message');
var num=document.getElementById('num');
var empty=true;
textbox.onfocus=function(){
if(textbox.value=="1500字以内"){
textbox.value="";
}
}
textbox.onblur=function(){
if(textbox.value==""){
empty=true;
textbox.value="1500字以内";
}else{
empty=false;
}
}
function hander(){
num.innerHTML=textbox.value.length;
}
if(window.ActiveXObject){
textbox.onpropertychage=hander;
}else{
textbox.addEventListener("input",hander,false);
} form.onsubmit=function(){
button.disabled=true;
} </script>

  

关于textarea的应用--onchage,onpropertychange,oninput的更多相关文章

  1. onchange/onpropertychange/oninput

    onpropertychange事件,顾名思义,就是property(属性)change(改变)的时候,触发事件.这是IE专有的!如果想兼容其它浏览器,有个类似的事件,oninput! 可能大家会想到 ...

  2. 监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等

    转自:http://blog.csdn.net/itchiang/article/details/7769337 要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增 ...

  3. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  4. asp.net,监听输入框值的即时变化onpropertychange、oninput

    作者:自由天堂发布站点:WEB六零零 网页设计制作原文地址:http://www.web600.net/html/editor/JavaScript/201001131529.html 要达到的效果 ...

  5. jquery的实时触发事件(textarea实时获取中文个数)

    jquery的实时触发事件(textarea实时获取中文个数) (2014-09-16 11:49:50) 转载▼ 标签: 实时触发事件 中文个数 onpropertychange oninput o ...

  6. 纯JS文本比较工具

    前段时间由于工作需要写了一个纯JS文本比较工具 在这里与大家分享下 算法有待优化,还希望大家多多指教 先上效果图: 奉上源码(把源码保存为html格式的文件就可以直接运行了): <!doctyp ...

  7. JS改变input的value值不触发onchange事件解决方案 (转)

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

  8. onchange事件

    一.onchange 一般input type text的onchange事件的触发需要两个条件:1.输入框的值发生了改变:2.该文本框失去了焦点,而真正的事件的触发却是发生在该文本框失去焦点的时候, ...

  9. 总结XX网app中webapp常见的前端错误。

    在2016年12月至2017年1月,这一个月的时间内,我参与了易政网app中webapp前端项目的工作,下面将我在此次项目中犯的错误总结起来,以防下次再犯.也终于知道之前看的文章中的一段话所代表的意义 ...

随机推荐

  1. android 焦点问题

    今天解决了一个Android平台下的焦点问题.发现其中关键问题的所在是Android的touchMode.从JavaSwing平台过来的人,都会关注setFocusable()和requestFocu ...

  2. 常用 SQL语句

    Oracle 查看所有表的名字: select table_name from user_tables; 查询特定表的名字:select * from (select table_name t fro ...

  3. typeof判断类型(数组类型得用instanceof)

    var a= 1; console.log(typeof a); var b= '1'; console.log(typeof b); var c; console.log(typeof c); va ...

  4. http请求连接

    1.在Info.plist中添加NSAppTransportSecurity类型Dictionary.2.在NSAppTransportSecurity下添加NSAllowsArbitraryLoad ...

  5. android执行外部命令、检测文件是否存在、自动检测U盘路径

    private final String UDiskFileName = "/2969_logo/bootfile.image"; private final String Loc ...

  6. HDU 4612 Warm up(双连通分量缩点+求树的直径)

    思路:强连通分量缩点,建立一颗新的树,然后求树的最长直径,然后加上一条边能够去掉的桥数,就是直径的长度. 树的直径长度的求法:两次bfs可以求,第一次随便找一个点u,然后进行bfs搜到的最后一个点v, ...

  7. Python -- lambda, map, filter

    lambda f = lambda x : x * 2 f(5) f = lambda x,y,z : x+y+z f(2,1,3) map list(map(lambda x:x[0].upper( ...

  8. 转:Loadrunner——Simulate a new user on each iteration设置

    最近在与大家的讨论中发现了LoadRunner的很多问题,出于解决问题的出发点,我也就相关自己不理解的问题在Google中搜索了一番,并通过一些实例也去实际操作了一遍,发现很多问题确实并不是那么难解决 ...

  9. 剑指offer 重建二叉树

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  10. AnimationSet的使用

    Animations的使用(3) 1 AnimationSet的使用方法 什么是AnimationSet 1 AnimationSet是Animation的子类 2 一个AnimationSet包含了 ...