テキスト ボックスの TAB キーをキャプチャする [クローズド]
-
08-06-2019 - |
質問
使えるようになりたいのですが、 タブ テキスト ボックス内で キーを押して、4 つのスペースをタブで移動します。現在では、Tab キーを押すとカーソルが次の入力にジャンプします。
UI に表示される前にテキスト ボックス内の Tab キーをキャプチャする JavaScript はありますか?
一部のブラウザについては理解しています(つまり、FireFox) ではこれが許可されない可能性があります。次のようなカスタムキーコンボはどうでしょうか シフト+タブ, 、 または Ctrl+Q?
解決
たとえ捕らえたとしても、 keydown
/keyup
これらはタブ キーが起動する唯一のイベントですが、タブ オーダーの次の項目に移動するデフォルトのアクションが発生しないようにする何らかの方法が必要です。
Firefox では、次のように呼び出すことができます。 preventDefault()
イベント ハンドラーに渡されるイベント オブジェクトのメソッド。IE では、イベント ハンドルから false を返す必要があります。JQuery ライブラリは、 preventDefault
IE と FF で動作するイベント オブジェクトのメソッド。
<body>
<input type="text" id="myInput">
<script type="text/javascript">
var myInput = document.getElementById("myInput");
if(myInput.addEventListener ) {
myInput.addEventListener('keydown',this.keyHandler,false);
} else if(myInput.attachEvent ) {
myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}
function keyHandler(e) {
var TABKEY = 9;
if(e.keyCode == TABKEY) {
this.value += " ";
if(e.preventDefault) {
e.preventDefault();
}
return false;
}
}
</script>
</body>
他のヒント
フォーム項目間のタブを壊すよりも、タブインデントが機能しない方が良いと思います。
Markdown ボックスにコードを挿入するためにインデントしたい場合は、次を使用します。 Ctrl+K (Mac の場合は ⌘K)。
実際にアクションを停止するという点では、イベント コールバックから false が返されたときに、jQuery (スタック オーバーフローが使用する) がイベントのバブリングを停止します。これにより、複数のブラウザでの作業が容易になります。
前の答えは問題ありませんが、私は動作とプレゼンテーションを混合する (HTML に JavaScript を入れる) ことに断固反対する人間の 1 人なので、イベント処理ロジックを JavaScript ファイルに入れることを好みます。さらに、すべてのブラウザが同じ方法でイベント (または e) を実装しているわけではありません。ロジックを実行する前にチェックを行うことをお勧めします。
document.onkeydown = TabExample;
function TabExample(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var tabKey = 9;
if(evt.keyCode == tabKey) {
// do work
}
}
キーのデフォルトの動作を変更しないことをお勧めします。私はできる限りマウスに触れずに作業しているので、フォーム上でタブ キーを次のフィールドに移動できないようにすると、非常に腹が立ちます。
ただし、特に大きなコード ブロックやネストの場合は、ショートカット キーが役立つ場合があります。Shift+TAB は通常、フォーム上の前のフィールドに移動するため、悪いオプションです。WMD エディターにショートカット キーを使用してコード TAB を挿入するための新しいボタンを追加することは可能でしょうか?
ScottKoon さんによるベストアンサーに問題があります
はい、これ
} else if(el.attachEvent ) {
myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}
そうあるべきです
} else if(myInput.attachEvent ) {
myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}
このためIEでは動作しませんでした。ScottKoon がコードを更新することを期待しています
Mac 上の Chrome では、alt-tab でタブ文字が挿入されます。 <textarea>
分野。
ここにその 1 つがあります:。ウィー!