GlobalEventHandlers.onkeypress
非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
GlobalEventHandlers
ミックスインの onkeypress
プロパティは、onkeypress
イベントを処理する event handler
です。
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 キーの組み合わせを除きます (ブラウザー間の互換性を維持するため)。
関連項目
keypress (en-US)
イベント- 関連するイベントハンドラー