| 本文 |
以下ソースです。
<html>
<head>
<style>
#txt {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<pre id="txt" contenteditable="true">テキストを入力</pre>
<script>
var el = document.getElementById('txt');
el.onkeydown = function(e) {
var tgt = e.currentTarget,
key = e.which || e.keyCode || 0;
if (key === 9) {
e.preventDefault();
var sel = window.getSelection(),
rng = sel.getRangeAt(0),
tabstr = document.createTextNode("\t");
rng.deleteContents();
rng.insertNode(tabstr);
rng.setStartAfter(tabstr);
rng.setEndAfter(tabstr);
sel.removeAllRanges();
sel.addRange(rng);
}
};
</script>
</body>
</html>
タグはpreを利用します。
デフォルトの動作を停止（preventDefault）しておく
選択範囲（現在のキャレット位置）を取得
TAB文字（\t）のNodeを作成
現在の選択範囲を消去
タブ文字ノードを挿入
タブ文字ノードの後ろに選択範囲を合わせる
一回現在の選択範囲を消去してから再度設定
で、TABキーでタブが入力できるようになると思います。
|
