window属性:onkeypress
onkeypress属性
该onkeypress属性设置并返回当前元素的onkeypress事件处理程序代码。
onkeypress属性语法
element.onkeypress = event handling code
笔记
当用户按下键盘上的按键时,应该会触发按键事件。但是,并非所有浏览器都会触发某些键的按键事件,请参考下文的浏览器兼容性。
onkeypress属性示例
示例1:通过正则表达式在表单(form)域中过滤数字
以下示例显示了在对表单(form)字段进行数字挖掘时使用该onkeypress事件以过滤输入的字符:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
return oKeyEvent.charCode === 0 || /\d/.test(String.fromCharCode(oKeyEvent.charCode));
}
</script>
</head>
<body>
<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" onkeypress="return numbersOnly(this, event);" onpaste="return false;" /></p>
</form>
</body>
</html>
示例2:捕获隐藏单词的输入内容
下面的例子将在用户在页面的任何点输入单词“exit”后执行一些操作。
注意:在GitHub上提供了一个更完整的捕获隐藏字词类型的框架。
/* Type the word "exit" in any point of your page... */
(function () {
var sSecret = /* chose your hidden word...: */ "exit", nOffset = 0;
document.onkeypress = function (oPEvt) {
var oEvent = oPEvt || window.event, nChr = oEvent.charCode, sNodeType = oEvent.target.nodeName.toUpperCase();
if (nChr === 0 || oEvent.target.contentEditable.toUpperCase() === "TRUE" || sNodeType === "TEXTAREA" || sNodeType === "INPUT" && oEvent.target.type.toUpperCase() === "TEXT") { return true; }
if (nChr !== sSecret.charCodeAt(nOffset)) {
nOffset = nChr === sSecret.charCodeAt(0) ? 1 : 0;
} else if (nOffset < sSecret.length - 1) {
nOffset++;
} else {
nOffset = 0;
/* do something here... */
alert("Yesss!!!");
location.assign("http://developer.mozilla.org/");
}
return true;
};
})();
规范
规范 | 状态 | 注释 |
---|---|---|
HTML Living Standard 该规范中'onkeypress'的定义。 | Living Standard |
浏览器兼容性
我们正在将兼容性数据转换为机器可读的JSON格式。
注意:基于Webkit的浏览器(例如Google Chrome和Safari)不会在箭头键上触发按键事件;Firefox不会在SHIFT等修饰键上触发按键事件。
- 电脑端
特征 | Chrome | Edge | Firefox(Gecko) | Internet Explorer | Opera | Safari(WebKit) |
---|---|---|---|---|---|---|
基本支持 | 支持 | 支持 | ? | ? | ? | ? |
- 移动端
特征 | Android | Android Webview | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|---|
基本支持 | ? | 支持 | ? | ? | ? | ? | ? | ? | 支持 |