|
onkeyup
onkeyup 事件会在键盘按键被松开时发生。
语法
onkeyup="SomeJavaScriptCode"参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。
支持该事件的 HTML 标签：
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>,
<fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>,
<th>, <thead>, <tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
document, image, link, textarea实例
当您在例子中的输入域中键入字符时，字符会被更改为大写（逐一地）：
| 代码如下 |
复制代码 |
|
<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>
输入您的姓名： <input type="text" id="fname" onkeyup="upperCase(this.id)" />
</body>
</html>
|
onkeydown
定义和用法
onkeydown 事件会在用户按下一个键盘按键时发生。
语法
onkeydown="SomeJavaScriptCode"参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。
支持该事件的 HTML 标签：
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>,
<fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>,
<th>, <thead>, <tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
document, image, link, textarea提示和注释
浏览器差异：Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which。
实例
在本例中，用户无法在输入框中键入数字：
| 代码如下 |
复制代码 |
|
<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /d/
return !numcheck.test(keychar)
}
</script>
<form>
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</html>
|
从上面积们可以看得出来onkeydown是按下的时候触发的，这个时候键值没有输出来。 onkeyup是按键抬起的时候执行的，这个时候键值已经有了。和按多长时间没关系，比如你给输入框加这2个事件，
<input type="text" id="test1" onkeydown="alert(this.value);"/>
<input type="text" id="test2" onkeyup="alert(this.value);"/>
你看看这二个不同的运行结果就明白 了！
| 代码如下 |
复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="test1" onkeydown="alert(this.value);"/>
<input type="text" id="test2" onkeyup="alert(this.value);"/>
</body>
</html>
|
这里给出一段测试代码:
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
document.onkeydown = function(){
document.getElementById("test").innerHTML += "keydown<br/>";
}
document.onkeyup = function(){
document.getElementById("test").innerHTML += "keyup<br/>";
}
document.onkeypress = function(){
document.getElementById("test").innerHTML += "keypress<br/>";
}
</script>
<div id="test"></div>
|
测试结果为:
| 代码如下 |
复制代码 |
|
keydown
keypress
keyup
|
显而易见,事件发生的顺序是: keydown --> keypress --> keyup
当按住一个键一段时间后再放开时,
结果为:
| 代码如下 |
复制代码 |
keydown
keypress
keydown
keypress
keydown
keypress
keydown
keypress
...
keyup |
|
