GlobalEventHandlers.onkeypress - Web API

非推奨
この機能はウェブ標準から削除されました。まだ対応しているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。使用を避け、できれば既存のコードを更新してください。このページの下部にあるブラウザーの対応を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

GlobalEventHandlers ミックスインの onkeypress プロパティは、onkeypress イベントを処理する EventHandler です。

keypress イベントはユーザーがキーボード上のキーを押下した時に発生すべきですが、実際のブラウザーでは特定のキーについて keypress イベントを発生させません。

onkeypress イベントハンドラーは非推奨です。代わりに onkeydown を使用してください。

構文

target.onkeypress = functionRef;

値

functionRef は関数名または関数式です。この関数は、KeyboardEvent オブジェクトとその 1 個の引数を受け取ります。

例

基本的な例

この例は、<input> 要素内でキーを押すたびに、そのキーの KeyboardEvent.code 値をログ出力します。

HTML

<input>
<p id="log"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('log');

input.onkeypress = logKey;

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

実行結果

正規表現でキーを絞り込む

この例は、フォームフィールドに入力された文字を正規表現を利用して絞り込みます。

HTML

<label>Enter numbers only:
  <input>
</label>

JavaScript

function numbersOnly(event) {
  return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));
}

const input = document.querySelector('input');
input.onkeypress = numbersOnly;

// 貼り付けを抑止 (貼り付けられたコンテンツに数字以外の文字が含まれる可能性があるため)
input.onpaste = event => false;

実行結果

合言葉の入力を捕捉する

次の JavaScript 関数は、ユーザーがページ上のどこかに "exit" と入力した後に何かをします。

/* Type the word "exit" in any point of your page... */

(function () {
  const sSecret = /* Choose your hidden word...: */ "exit";
  let nOffset = 0;

  document.onkeypress = function(oPEvt) {
    let 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("https://developer.mozilla.org/");
    }

    return true;
  };
})();

注記: 合言葉の入力を捕捉する完全なフレームワークは、GitHub 上にあります。

仕様

仕様書	策定状況	備考
HTML Living Standard onkeypress の定義	現行の標準

ブラウザー実装状況

BCD tables only load in the browser

keypress イベントは non-printable keys に対して発生しなくなりました (この Firefox 65 での実装についてバグ 968056 を参照)。ただし、Enter キーおよび Shift + Enter、Ctrl + Enter キーの組み合わせを除きます (ブラウザー間の互換性を維持するため)。