GlobalEventHandlers.onkeypress

跳转到：
  1. 语法
  2. 备注
  3. 示例
  4. 规范
  5. Browser compatibility

onkeypress 属性用来获取或设置当前元素的keypress事件的事件处理函数.

语法

element.onkeypress = event handling code

备注

当用户在键盘上按下任意键时，应当会触发 keypress 事件。然则有些浏览器不会触发某些键的 kerpress 事件。

浏览器不兼容性

Webkit-based 浏览器（如 Google Chrome 及 Safari）不会触发方向键的 keypress 事件。

Firefox 不会触发如 SHIFT 键等修改键的 keypress 事件。

示例

示例1：通过正则表达式在表单域中过滤数字

下例演示了 onkeypress 事件在一个文本输入框内的用法——将数字输入到表单时过滤输入的内容:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<script type="text/javascript">
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 || /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>
</head>

<body>
<form name="myForm">
<p>这个文本框只能输入数字(译者注:不用中文输入法的前提下):
<input type="text" name="myInput" onkeypress="return numbersOnly(this, event);" onpaste="return false;" /></p>
</form>
</body>
</html>

示例2：捕获隐藏单词的输入

以下示例将在用户在页面的任何位置键入单词“exit”后执行某些操作。

Note: A more complete framework for capturing the typing of hidden words is available on 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;
  };
})();

规范

Specification Status Comment
HTML Living Standard
onkeypress		 Living Standard  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

文档标签和贡献者

标签： 
此页面的贡献者： Ende93, teoli, khalid32, ziyunfei
最后编辑者: Ende93,