GlobalEventHandlers.onkeypress

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

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

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

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

構文

target.onkeypress = functionRef;

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

GlobalEventHandlers.onkeypress

構文

値

例

基本的な例

HTML

JavaScript

実行結果

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

HTML

JavaScript

実行結果

合言葉の入力を捕捉する

仕様

ブラウザー実装状況

関連項目