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)
基本支持支持支持
  • 移动端

特征AndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
基本支持?支持??????支持
以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部