GlobalEventHandlers.onkeypress

非推奨

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

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 キーの組み合わせを除きます (ブラウザー間の互換性を維持するため)。

関連項目