誰でも、テキストエリアのタブキーの押下をキャッチし、正しい位置に4つのスペースを置き換えるためのクロスブラウザ、信頼性の高いソリューションを知っていますか？テキストエリアはエッセイを入力するために使用されており、この機能が必要です。TextAreaのタブキャッチ
注：FCKEditorを使用しようとしましたが、これにはタブが付いていないし、必要のない機能がたくさんありました。私は単にタブをキャッチするための単純なソリューションが欲しいです。
私は広範囲にテストしていないが、これは動作するようです：
（私はhttp://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript#comment-3817で "insertAtCursor" 機能を発見した）
<textarea id="text-area" rows="20" cols="100"></textarea>
<script>
document.getElementById("text-area").onkeydown = function(e) {
if (!e && event.keyCode == 9)
{
event.returnValue = false;
insertAtCursor(document.getElementById("text-area"), " ");
}
else if (e.keyCode == 9)
{
e.preventDefault();
insertAtCursor(document.getElementById("text-area"), " ");
}
};
//http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript#comment-3817
function insertAtCursor(myField, myValue) {
//IE support
if (document.selection) {
var temp;
myField.focus();
sel = document.selection.createRange();
temp = sel.text.length;
sel.text = myValue;
if (myValue.length == 0) {
sel.moveStart('character', myValue.length);
sel.moveEnd('character', myValue.length);
} else {
sel.moveStart('character', -myValue.length + temp);
}
sel.select();
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else {
myField.value += myValue;
}
}
</script>
EDIT：それはdoesnのようにスクリプトを修正jQueryを使用します。
編集が完了した後にタブを置き換えることができない何らかの理由はありますか？私はテキストエリアを入力している間にテキストを置き換えることでかなり遊んだことがあり、それは最高でも実用的ではないことがわかりました。
ポイントは、ユーザーがページを使用するときに「タブ」を挿入できるはずですが、デフォルトではタブキーが次の要素にフォーカスを移動します。 – user122147
次に、onkeydownのクロスブラウザ実装に取り掛かっています。これは、決して勇敢に試したことがないものです。がんばろう！ – Dave
<html>
<head>
<script type="text/javascript">
function keyHandler(e) {
var TABKEY = 9;
var backSlash = 8;
var code = e.keyCode ? e.keyCode : e.charCode ? e.charCode : e.which;
if(code == TABKEY && !e.shiftKey && !e.ctrlKey && !e.altKey) {
var val = document.getElementById("t1");
val.value=(val.value).substring(0,getCaret(val)) + " " + (val.value).substring(getCaret(val));
//document.getElementById("t1").value += " ";
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
val.focus();
return false;
}
if(code == backSlash) {
var val = document.getElementById("t1");
val.value=(val.value).substring(0,getCaret(val)-4) + (val.value).substring(getCaret(val));
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
return false;
}
}
function getCaret(el) {
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
</script>
</head>
<body>
<textarea id="t1" onkeydown="javascript:keyHandler(event)"></textarea>
</body>
</hrml>
おそらく重複http://stackoverflow.com/questions/3362/capturing-tab-key-in-text-box – freitass
（タブは、文字列の途中で発生した場合）溶液をインラインで動作していないことを私think – user122147