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>

JS 事件（onkeyup、onkeydown、onkeypress、onchange），对文本的事件处理之小总结相关推荐

浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件
OnKeyPress事件 OnKeyPress事件是在用户按下键盘上任何一个可打印的字符时发生,只有能接收键盘输入的组件才有OnKeyPress事件.我们常常利用OnKeyPress事件截取在编辑框和 ...
JS键盘事件: onkeyup onkeypress onblur onfocus作用。
查询快递单号的时候,想要在键盘输入然后在驿站大屏幕上展示出来.应该怎么做到呢? @onkeyup @onkeypress @onblur @onfocus使用这四个事件操作试试咯! 1.按下键盘任意键 ...
html事件中写js,html中js事件onkeydown的功能详解
摘要: 下文讲述html中onkeydown事件的相关说明,如下所示: onkeydown事件功能 onkeydown事件功能: onkeydown事件用于当用户在html对象上按下键盘时(此时还未松 ...
html 点击文本框则选中,JS事件内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。...
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
键盘事件（onkeyup onkeydown）
两者的区别 1.表示的意义不同.onkeyup键盘抬起事件,onkeydown键盘按下事件 2.触发时机不同.onkeyup 事件会在键盘按键被松开时发生.onkeydown 事件会在用户按下一个键盘 ...
【杂记】（input获取焦点失去焦点、获取input中输入的值、键盘事件、js事件、Math 属性、手机自适应meta定义、去掉input内置阴影、图片居中、去蓝色默认背景、点击去掉默认边框）
1. input获取焦点失去焦点 input:focus{border:1px red solid:} 获取焦点 .focus()失去焦点.blur() 2. 获取input中输入的值 <inp ...
JS事件汇总,addEventListener添加事件监听
JS事件汇总 JavaScript 事件 JS事件汇总鼠标事件键盘事件表单事件读取事件 onload与onpageshow事件区别其它事件 addEventListener()添加事件监听 ...
常见的JS事件汇总（简洁易懂）
1. js事件 1.1 onclick 点击事件 1.2 onload 用户进入某个页面的时候触发(onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本.) ...
JS事件大全 - semye-静心 - 博客园
本文转自 http://www.cnblogs.com/semye/archive/2007/04/16/706957.html js事件列表一般事件事件浏览器支持描述 onClick IE ...

JS 事件（onkeyup、onkeydown、onkeypress、onchange），对文本的事件处理之小总结

1、事件的简单介绍

按键相关的：

onkeydown 当用户按下键盘按键时触发。
onkeyup 当用户释放键盘按键时触发。
onkeypress 当键盘按键被按下并释放一个键时发生。

其他：

onchange 当对象或选中区的内容改变时触发。

2、事件的详细介绍

onkeydown ：当按键按下时，先触发事件发生，然后处理完后才会把按键对应的按键值显示在文本框中！监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。

onkeypress ：所有情况与onkeydown事件相同！但是其特殊实用的地方很少，所以几乎可以使用onkeydown事件完全替代作用！！

注意：在所有浏览器中 onkeypress 事件不是适用于所有按键(如： ALT, CTRL, SHIFT, ESC)。

ps:这里的智联是本人觉得最贴切的例子，如有不对的地方可以联系我...

三个事件的联系：每当敲击一下键盘这三个事件会依次发生：onkeydown--onkeypress--onkeyup

onchange ：当对象或选中区的内容改变时触发。其中当文本域和文本框中的文字内容在编辑状态的时候（文本域和文本框一直获取焦点）是不会触发onchange事件，只有文本内容改变后失去焦点时才会触发onchange事件。

常用的控件：下拉框（select）、文本框(text)、文本域(textarea)

注意：只有把值改变了以后失去焦点才会触发onchange事件，内容不变的情况是无论如何也不会触发onchange事件的！！

JS 事件（onkeyup、onkeydown、onkeypress、onchange），对文本的事件处理之小总结相关推荐

最新文章

热门文章

JS 事件（onkeyup、onkeydown、onkeypress、onchange），对文本的事件处理之小总结

1、事件的简单介绍

按键相关的：

onkeydown 当用户按下键盘按键时触发。 onkeyup 当用户释放键盘按键时触发。 onkeypress 当键盘按键被按下并释放一个键时发生。

其他：

onchange 当对象或选中区的内容改变时触发。

2、事件的详细介绍

onkeydown ：当按键按下时，先触发事件发生，然后处理完后才会把按键对应的按键值显示在文本框中！监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。

onkeypress ：所有情况与onkeydown事件相同！但是其特殊实用的地方很少，所以几乎可以使用onkeydown事件完全替代作用！！

注意： 在所有浏览器中 onkeypress 事件不是适用于所有按键(如： ALT, CTRL, SHIFT, ESC)。

ps:这里的智联是本人觉得最贴切的例子，如有不对的地方可以联系我...

三个事件的联系：每当敲击一下键盘这三个事件会依次发生：onkeydown--onkeypress--onkeyup

onchange ：当对象或选中区的内容改变时触发。其中当文本域和文本框中的文字内容在编辑状态的时候（文本域和文本框一直获取焦点）是不会触发onchange事件，只有文本内容改变后失去焦点时才会触发onchange事件。

常用的控件：下拉框（select）、文本框(text)、文本域(textarea)

注意：只有把值改变了以后失去焦点才会触发onchange事件，内容不变的情况是无论如何也不会触发onchange事件的！！

JS 事件（onkeyup、onkeydown、onkeypress、onchange），对文本的事件处理之小总结相关推荐

最新文章

热门文章

onkeydown 当用户按下键盘按键时触发。
onkeyup 当用户释放键盘按键时触发。
onkeypress 当键盘按键被按下并释放一个键时发生。

注意：在所有浏览器中 onkeypress 事件不是适用于所有按键(如： ALT, CTRL, SHIFT, ESC)。