Czy ktoś wie, cross-przeglądarkę, niezawodne rozwiązanie do przechwytywania naciśnięć klawisza tabulatora w polu pole tekstowe i zastąpienie (w poprawnej pozycji) 4 spacje? Textarea jest używana do wprowadzania eseju i potrzebuje tej funkcji.Catching Tabs w TextArea
Uwaga: Próbowałem używać między innymi narzędzia FCKEditor, które nie przechwytywało kart i zawierało wiele funkcji, których nie potrzebowałem. Chcę proste rozwiązanie tylko do łapania kart.
nie testowałem intensywnie, ale to wydaje się działać:
(Znalazłem funkcję "insertAtCursor" na http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript#comment-3817)
<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: Zmodyfikowane skrypt tak nie robi” t używaj jQuery.
Czy jest jakiś powód, że nie można po prostu wymienić kart po zakończeniu edycji? Dużo grałem przy wymianie tekstu podczas pisania w tekście i stwierdziłem, że jest w najlepszym razie niepraktyczne.
Chodzi o to, że użytkownik powinien móc wstawiać "zakładki" podczas korzystania ze strony, ale domyślnie cykle klawisza tabulatora skupiają się na następnym elemencie. – user122147
Następnie dostajesz się do implementacji przeglądarki onkeydown w różnych przeglądarkach, co jest czymś, na co nigdy nie byłem wystarczająco odważny. Powodzenia! – 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>
Ewentualnie powielane http://stackoverflow.com/questions/3362/capturing-tab-key-in-text-box – freitass
To rozwiązanie nie działa inline (jeśli występują zaczepy w środku napisu) I think – user122147