关于textarea的应用--onchage,onpropertychange,oninput
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的更多相关文章
- onchange/onpropertychange/oninput
onpropertychange事件,顾名思义,就是property(属性)change(改变)的时候,触发事件.这是IE专有的!如果想兼容其它浏览器,有个类似的事件,oninput! 可能大家会想到 ...
- 监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等
转自:http://blog.csdn.net/itchiang/article/details/7769337 要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增 ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- asp.net,监听输入框值的即时变化onpropertychange、oninput
作者:自由天堂发布站点:WEB六零零 网页设计制作原文地址:http://www.web600.net/html/editor/JavaScript/201001131529.html 要达到的效果 ...
- jquery的实时触发事件(textarea实时获取中文个数)
jquery的实时触发事件(textarea实时获取中文个数) (2014-09-16 11:49:50) 转载▼ 标签: 实时触发事件 中文个数 onpropertychange oninput o ...
- 纯JS文本比较工具
前段时间由于工作需要写了一个纯JS文本比较工具 在这里与大家分享下 算法有待优化,还希望大家多多指教 先上效果图: 奉上源码(把源码保存为html格式的文件就可以直接运行了): <!doctyp ...
- JS改变input的value值不触发onchange事件解决方案 (转)
方法(一)(转载的网络资料) 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...
- onchange事件
一.onchange 一般input type text的onchange事件的触发需要两个条件:1.输入框的值发生了改变:2.该文本框失去了焦点,而真正的事件的触发却是发生在该文本框失去焦点的时候, ...
- 总结XX网app中webapp常见的前端错误。
在2016年12月至2017年1月,这一个月的时间内,我参与了易政网app中webapp前端项目的工作,下面将我在此次项目中犯的错误总结起来,以防下次再犯.也终于知道之前看的文章中的一段话所代表的意义 ...
随机推荐
- [code]最长回文子串
分析: 不能用scanf("%s"),因为碰到空格或者Tab就会停下来. 解决输入中有空格 方法一:使用fgetc(fin),读取一个打开的文件fin,读取一个字符,然后返回一个i ...
- 命名空间“Microsoft”中不存在类型或命名空间名称“Office”(是缺少程序集引用吗?)
通过引用这个解决,不同的的office版本,中间的版本号可能不同,如图所示:
- centos mono
wget http://download.mono-project.com/sources/mono/mono-4.0.1.tar.bz2wget http://download.mono-proje ...
- linux系统查询命令
查看CPU 1.1 查看CPU个数 # cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 2 **uniq命令:删除重复行 ...
- Theos tweak MSHookFunction
#import "substrate.h" static FILE * (*s_orig_fopen) ( const char * filename, const char * ...
- [转]Android 导入v7包常见错误,以及项目引用v7包错误解决
android下v4 v7 v21等包是android系统的扩展支持包,就想windows的系统补丁一个道理. android的扩展包主要是用来兼容低版本的,比如android3.0以后出现 ...
- 初探JavaScript魅力(三)
复选框的全选.反选和不选 <title>无标题文档</title> <style> body{background:#666;} </style> &l ...
- java 参数传值
基本数据类型参数的传值,参数为基本数据类型 class Computer{ int add(int x,int y){ return x+y; } } public class Example4_6 ...
- Android真机连接手机Target显示unknown cmd命令下adb devices 显示offline
主要原因是adb版本的问题: 1.找到adb.exe路径 比如:G:\BaiduYunDownload\Android\android-sdk\platform-tools,将该路径放到环境便利-- ...
- 笔记整理--Linux平台MYSQL的C语言
Linux平台MYSQL的C语言API全列表 - 第三只眼的专栏 - 博客频道 - CSDN.NET - Google Chrome (2013/8/18 22:28:58) Linux平台MYS ...