键盘事件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32758013/article/details/75907368

1. onkeydown

在用户按下一个键盘按键时发生

提示

与 onkeydown 事件相关联的事件触发次序:
1. onkeydown
2. onkeypress
3. onkeyup

HTML标签支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

语法

ElementObject.onkeydown = function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
<input id='input' type="text"/>
<textarea id='div'></textarea>
</body>
<script>
    input.onkeydown = function(){
        dataBound(this,div);
    }

    function dataBound(Ibound,Ybound){
        var YNodeNmae = Ybound.nodeName.toLowerCase();

        // 如果Ybound 不是 input 标签 就给文本 否者给value值
        if(!(YNodeNmae == "input")){
            Ybound.innerText = Ibound.value;
        }else{
            Ybound.value = Ibound.value;
        }
    }//将 Ibound 的值给 Ybound
</script>
</html>

2. onkeypress

在键盘按键被按下并释放一个键时发生

提示

与 onkeydown 事件相关联的事件触发次序:
1. onkeydown
2. onkeypress
3. onkeyup

HTML标签支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

注意

在所有浏览器中 onkeypress 事件不是适用于所有按键(如： ALT, CTRL, SHIFT, ESC)。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。

语法

ElementObject.onkeypress = function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
<input id='input' type="text"/>
<input id='div'/>
</body>
<script>
    input.onkeypress = function(){
        dataBound(this,div);
    }

    function dataBound(Ibound,Ybound){
        var YNodeNmae = Ybound.nodeName.toLowerCase();

        // 如果Ybound 不是 input 标签 就给文本 否者给value值
        if(!(YNodeNmae == "input")){
            Ybound.innerText = Ibound.value;
        }else{
            Ybound.value = Ibound.value;
        }
    }//将 Ibound 的值给 Ybound
</script>
</html>

3. onkeyup

在键盘按键被松开时发生

提示

与 onkeydown 事件相关联的事件触发次序:
1. onkeydown
2. onkeypress
3. onkeyup

HTML标签支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

注意

语法

ElementObject.onkeyup = function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
<input id='input' type="text"/>
<div id='div'></div>
</body>
<script>
    input.onkeyup = function(){
        dataBound(this,div);
    }

    function dataBound(Ibound,Ybound){
        var YNodeNmae = Ybound.nodeName.toLowerCase();

        // 如果Ybound 不是 input 标签 就给文本 否者给value值
        if(!(YNodeNmae == "input")){
            Ybound.innerText = Ibound.value;
        }else{
            Ybound.value = Ibound.value;
        }
    }//将 Ibound 的值给 Ybound
</script>
</html>