JS 事件(onkeyup、onkeydown、onkeypress、onchange),对文本的事件处理之小总结
来源:互联网 发布:网盘搬家 知乎 编辑:程序博客网 时间:2024/05/21 06:18
1、事件的简单介绍
按键相关的:
onkeydown 当用户按下键盘按键时触发。
onkeyup 当用户释放键盘按键时触发。
onkeypress 当键盘按键被按下并释放一个键时发生。
其他:
onchange 当对象或选中区的内容改变时触发。
2、事件的详细介绍
onkeydown :当按键按下时,先触发事件发生,然后处理完后才会把按键对应的按键值显示在文本框中!监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。
代码解释如下:(第一次按键按下时会触发事件,即出现警示框,显示文本框长度为“0”,然后点击警示框确认后才会把对应的按键值显示在文本框中!)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){document.getElementById("textarea").onkeydown = function(){alert("文本框的长度:"+document.getElementById("textarea").value.length);}}</script></head><body><form><textarea id="textarea"></textarea></form></body></html>
onkeypress :所有情况与onkeydown事件相同!但是其特殊实用的地方很少,所以几乎可以使用onkeydown事件完全替代作用!!
注意: 在所有浏览器中 onkeypress 事件不是适用于所有按键(如: ALT, CTRL, SHIFT, ESC)。
代码解释如下:(现象与onkeydown事件一样,会先出现警示框,关闭警示框后才会把按键值显示在文本框中!)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){document.getElementById("textarea").onkeypress = function(){alert("文本框的长度:"+document.getElementById("textarea").value.length);}}</script></head><body><form><textarea id="textarea"></textarea></form></body></html>
onkeyup :当按键释放时会调用事件,但是调用事件之前已经把该按键值显示到了文本框中了。(用于统计文本框中的文本字数的时候应该使用onkeyup事件!例如:招聘平台上自我介绍的字数统计,“智联招聘->我的智联->工作经验->工作描述”就可以看到其用处!)
ps:这里的智联是本人觉得最贴切的例子,如有不对的地方可以联系我...
代码解释如下:(当按键释放时,文本框中已经把按键值显示在了其中,所以这个时候调用onkeyup事件显示的信息才是准确的!)<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){document.getElementById("textarea").onkeyup = function(){alert("文本框的长度:"+document.getElementById("textarea").value.length);}}</script></head><body><form><textarea id="textarea"></textarea></form></body></html>
三个事件的联系:每当敲击一下键盘这三个事件会依次发生:onkeydown--onkeypress--onkeyup
onchange :当对象或选中区的内容改变时触发。其中当文本域和文本框中的文字内容在编辑状态的时候(文本域和文本框一直获取焦点)是不会触发onchange事件,只有文本内容改变后失去焦点时才会触发onchange事件。
常用的控件:下拉框(select)、文本框(text)、文本域(textarea)
注意:只有把值改变了以后失去焦点才会触发onchange事件,内容不变的情况是无论如何也不会触发onchange事件的!!
代码解释如下:(当焦点一直在文本域或文本框中则一直不会调用onchange事件,但一失去焦点就会触发事件!)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){document.getElementById("textarea").onchange = function(){alert("文本域的长度:"+document.getElementById("textarea").value.length);}document.getElementById("text").onchange = function(){alert("文本框的长度:"+document.getElementById("text").value.length);}}</script></head><body><form>文本域:<textarea id="textarea"></textarea><br />文本框:<input type="text" id="text"/></form></body></html>
阅读全文
0 0
- JS 事件(onkeyup、onkeydown、onkeypress、onchange),对文本的事件处理之小总结
- onkeyup,onkeydown,onkeypress事件
- onkeydown 、onkeypress 、onKeyUp 事件
- js中的键盘事件:onkeydown、onkeypress、onkeyup
- 输入框的onkeydown onkeypress onkeyup事件
- onkeypress事件.onkeydown事件.onkeyup事件
- 浅析OnKeyPress事件和OnKeyDown/OnKeyUp事件
- 淺析OnKeyPress事件和OnKeyDown/OnKeyUp事件
- 浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件
- input text控件的onkeydown、onKeyPress、onkeyup事件的区别
- javascript中的onkeyup、onkeydown、onkeypress事件
- JS之onkeypress,onkeydown,onkeyup区别
- onkeydown、onkeypress、onkeyup、onblur、onchange、oninput、onpropertychange的区别
- onkeyup事件、onkeydown事件、onblur事件、onchange事件
- onkeypress onkeyup onkeydown 的区别
- onkeypress,onkeyup,onkeydown的区别
- onkeyup,onkeydown,onkeypress的区别
- input输入框使用onkeypress实现回车启动按钮事件,另注:onkeypress、onkeyup与onkeydown的区别
- android 目录结构图
- 两数组的交
- hadoop学习6 运行map reduce出错
- c语言练习题(4)--字符串递减替换
- servlet之修改查询语句编码问题
- JS 事件(onkeyup、onkeydown、onkeypress、onchange),对文本的事件处理之小总结
- Jquery控制背景图片更换
- MySQL 中的数据类型介绍
- 《编程范式》学习笔记
- Linux for Ubuntu Eclipse配置OpenGL编译命令
- 一分钟了解“Matlab求两个矩阵的相关程度corr2”
- hadoop原生集群搭建
- 实现CVE-2016-3842的堆喷
- 信息熵计算权重