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 の定義
現行の標準

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onkeypressChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

ブラウザー互換性ノート

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

関連項目