阅读(3k) 书签赞(0) 我要纠错

window属性：onkeypress

2018-05-09 13:45 更新

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
基本支持	?	支持	?	?	?	?	?	?	支持

以上内容是否对您有帮助：

← window属性：onkeydown

window属性：onkeyup →

写笔记

我要补充