テキストボックス内で Tab キーを使って、スペース4つ分をタブで移動できるようにしたいのです。今のままでは、Tabキーでカーソルが次の入力にジャンプしてしまいます。
UIにバブルアップされる前に、テキストボックスのTabキーをキャプチャするJavaScriptはありますか?
ブラウザ(FireFoxなど)によっては許可されない場合もあるかと思いますが、どうでしょうか?また、カスタムキーコンボとして、 Shift+Tab や、 Ctrl+Q などではどうですか?
keydown
/ keyup
イベントをキャプチャしても、これらはタブキーが起動する唯一のイベントですが、デフォルトのアクション(タブ順序で次の項目に移動)が発生しないようにする方法が必要です。
Firefoxでは、イベントハンドラーに渡されたイベントオブジェクトで「preventDefault()」メソッドを呼び出すことができます。 IEでは、イベントハンドルからfalseを返す必要があります。 JQueryライブラリは、IEおよびFFで機能するイベントオブジェクトに「preventDefault」メソッドを提供します。
<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)を使用します。
実際に動作を停止させるという点では、(スタックオーバーフローが使用している)jQueryは、イベントコールバックからfalseを返すと、イベントのバブリングを停止させることができます。これは、複数のブラウザで作業する際に便利です。
前の答えでもいいのですが、私は動作と体裁を混同すること(HTMLにJavaScriptを入れること)には断固反対なので、イベント処理のロジックはJavaScriptファイルに入れることを好んでいます。さらに、すべてのブラウザが同じようにイベント(またはe)を実装しているわけではありません。ロジックを実行する前に確認することをお勧めします。
document.onkeydown = TabExample;
function TabExample(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var tabKey = 9;
if(evt.keyCode == tabKey) {
// do work
}
}
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がコードを更新することを期待しています。