--- title: GlobalEventHandlers.onkeypress slug: Web/API/GlobalEventHandlers/onkeypress tags: - API - Event Handler - GlobalEventHandlers - HTML DOM - Property - Reference translation_of: Web/API/GlobalEventHandlers/onkeypress ---
{{ApiRef("HTML DOM")}} {{deprecated_header}}

{{domxref("GlobalEventHandlers")}} ミックスインの onkeypress プロパティは、{{event("onkeypress")}} イベントを処理する {{event("Event_handlers", "event handler")}} です。

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

onkeypress イベントハンドラーは非推奨です。代わりに {{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}} を使用してください。

構文

target.onkeypress = functionRef;

値

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

例

基本的な例

この例は、{{HtmlElement("input")}} 要素内でキーを押すたびに、そのキーの {{domxref("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}`;
}

実行結果

{{EmbedLiveSample("Basic_example", 700, 200)}}

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

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

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;

実行結果

{{EmbedLiveSample("Filter_keys_with_a_regular_expression")}}

合言葉の入力を捕捉する

次の 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 上にあります。

仕様

仕様書 策定状況 備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeypress','onkeypress')}} {{Spec2('HTML WHATWG')}}

ブラウザー実装状況

{{Compat("api.GlobalEventHandlers.onkeypress")}}

ブラウザー互換性ノート

関連項目