html 键盘事件

html键盘事件

onkeydown       当按下按键时运行脚本
onkeypress      当按下并松开按键时运行脚本
onkeyup         当松开按键时运行脚本

实例

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单事件</title>
    <script type="text/javascript">
        function getValues() {
            let name = document.getElementById('name').value;
            let password = document.getElementById('password').value;
            alert("账号:" + name + ",密码:" + password);
        }
        function getKeyChar() {
            document.onkeypress = function (ev) {
                let oEvent = ev || event;
                let char = String.fromCharCode(oEvent.keyCode);
                alert(char);
            }
        }
    </script>
</head>
<body>
<form action="#" onsubmit="getValues()">
    <lable>账号:</lable><input type="text" id="name" value="" onkeydown="alert('键盘按键按下');"/>
    <label>密码:</label><input type="password" id="password" value="" onkeyup="alert('键盘按键弹起');"/>
    <label>键盘按键:</label><input type="password" id="password" value="" onkeypress="getKeyChar()"/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>
posted @ 2021-06-21 08:23  胡勇健  阅读(469)  评论(0)    收藏  举报