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. Java多态(一)

    父类: public class Parent { public String name; private String pass; public void say1(AA aa){ System.o ...

  2. ListBox之类控件的Item项显示对象的两个属性

    wpf项目中,ListBox绑定对象集合,ListBoxItem要显示对象的两个属性,例如:显示员工的工号和姓名. 之前我的做法是在Employee员工类中添加一个"NumAndName&q ...

  3. awk 用法小结

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  4. properties 配置文件如何换行

    在使用properties配置文件的时候我们经常碰到如下两个问题 1:当a=b中的b值内容特别长的时候为了阅读方便我们手动换行,但如果我们直接回车那么后面的数据就会丢失.那如何解决呢? 例如: a=a ...

  5. One-Way Reform

    One-Way Reform time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  6. ActionResult的其它返回值

    我们上边所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Inde ...

  7. GCD应用场景

    1.计算文件大小放在子线程中中计算,计算完了,回到主线程更新UI

  8. Swift -> RunTime(动态性) 问题 浅析

    Swift是苹果2014年发布的编程开发语言,可与Objective-C共同运行于Mac OS和iOS平台,用于搭建基于苹果平台的应用程序.Swift已经开源,目前最新版本为2.2.我们知道Objec ...

  9. Category / Extention / 属性 / 成员变量 /

    转载自:http://blog.csdn.net/itianyi/article/details/8618128 在ios第一版中,我们为输出口同时声明了属性和底层实例变量,那时,属性是oc语言的一个 ...

  10. USB鼠标线序

    鼠标线断了,找了个废弃的手机充电线接上,特记录线序如下: 红————白          白————橙绿————绿黑————蓝