WebページでAltキーを押すとメニューにフォーカスが移る動作をブロックするコードを紹介します。
デフォルトの動作
コード
以下のHTMLファイルを作成します。
textarea タグを記述し、複数行のテキストボックスを配置します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>Alt入力をブロックするデモ(テキストボックスのみ)</p>
<textarea id="TextArea1" cols="64" rows="12"></textarea>
</body>
</html>
動作結果
上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。
テキストボックスに文字を入力します。テキストボックスに文字が入力できます。
テキストボックスにフォーカスがある状態で[Alt]キーを押します。テキストボックスからフォーカスが移動し、Webブラウザの
ツールバーの右側にあるメニューボタン([...]ボタン)にフォーカスが移動します。
Webブラウザの標準動作ですが、長い文章を入力するテキストボックスでAltキーを押すとフォーカスが抜けてしまう動作が不便な場合があります。
この記事ではWebブラウザで[Alt]キーを押した場合に、メニューにフォーカスが移動しないようにするコードを紹介します。
実装例
コード
次のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
var elem = document.getElementById("TextArea1");
elem.onkeydown = keydown;
}
function keydown(event) {
if (event.keyCode == 0x12) {
return false;
}
}
</script>
</head>
<body>
<p>Alt入力をブロックするデモ(テキストボックスのみ)</p>
<textarea id="TextArea1" cols="64" rows="12"></textarea>
</body>
</html>
解説
window.onload イベントを設定します。ページ読み込み時のJavaScript実行の詳細は
こちらの記事も参照してください。
ページの読み込みが完了したタイミングで、
getElementByIdメソッドを呼び出し、textareaタグの要素を取得します。
取得したtextarea コントロールのonkeydown イベントを設定します。
window.onload = function () {
var elem = document.getElementById("TextArea1");
elem.onkeydown = keydown;
}
textareaでキーを押した際に呼び出される keydown 関数が以下のコードになります。
JavaScriptでのキー入力の検出は
こちらの記事も参照して下さい。
押されたキーコードを判定し、Altキー(0x12)の場合は、false を戻り値として返し、キーの押下をキャンセルします。
function keydown(event) {
if (event.keyCode == 0x12) {
return false;
}
}
実行結果
先のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。
テキストボックスに文字を入力します。テキストボックスに文字が入力できます。
テキストボックスにフォーカスがある状態で[Alt]キーを押します。[Alt]キーを押してもフォーカスがテキストボックスから抜けず、
ウィンドウのメニューボタン([...]ボタン)にフォーカスが映らないです。
テキストボックスでAltキーを押した場合のメニューへのフォーカス移動をブロックできました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2021-06-17
作成日: 2021-06-16
