关于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前端项目的工作,下面将我在此次项目中犯的错误总结起来,以防下次再犯.也终于知道之前看的文章中的一段话所代表的意义 ...
随机推荐
- GitHub这么火,程序员你不学学吗? 超简单入门教程 【转载】
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...
- Hibernate Tools for Eclipse安装
声明:本文转载自 http://developer.51cto.com/art/200906/128067.htm Hibernate Tools for Eclipse Plugins 的安装和使用 ...
- flex超链接
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- ReactiveCocoa的冷信号与热信号 探讨
背景 ReactiveCocoa(简称RAC)是最初由GitHub团队开发的一套基于Cocoa的FRP框架.FRP即Functional Reactive Programming(函数式响应式编程), ...
- parseint和parsefloat总结number。隐形转换
parseint:会认识一些字符+.-.空格,其他的就会截止譬如23hudhchauch结果为:23,对于boollen类型不能转换为1或是0. number:是对整体的转换.对true的转换为1. ...
- java 继承与多态
Example5_11.java class 动物 { void cry() { } } class 狗 extends 动物 { void cry() { System.out.println(&q ...
- js date相关学习!
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- ubuntu apache2 流量限制模块
mod-bw is an Apache 2 module provided to solve the problem of limiting users’ and virtual hosts’ ban ...
- android经典开源代码集合
一.依赖注入DI通过依赖注入减少View.服务.资源简化初始化,事件绑定等重复繁琐工作1. AndroidAnnotations(Code Diet) android快速开发框架项目地址:https: ...
- vbs 截图
'VBS截屏.vbs ' Win7x64 测试通过(已安装Word2007): '参考: ' http://qtp.blogspot.com/2010/02/screenshot-vbscript ...