Fangen Tabs in TextArea

Kennt jemand eine Cross-Browser, zuverlässige Lösung für das Abfangen von Drücken der Tab-Taste in einem Textfeldfeld und Ersetzen (in der richtigen Position) 4 Leerzeichen? Der Textbereich wird verwendet, um einen Aufsatz einzugeben, und benötigt diese Funktion.Fangen Tabs in TextArea

Hinweis: Ich habe versucht, mit FCKEditor, unter anderem, die Tabs nicht gefangen und hatte eine Reihe von Funktionen, die ich nicht brauchte. Ich möchte eine einfache Lösung nur zum Erfassen von Tabs.

Quelle

2009-07-09 user122147

Möglicherweise dupliziert http://stackoverflow.com/questions/3362/capturing-tab-key-in-text-box – freitass

Diese Lösung keine Inline arbeiten (wenn Registerkarten in der Mitte der Zeichenfolge auftreten) I Think – user122147

ich nicht ausgiebig testen, aber dies scheint zu funktionieren:

(I die "insertAtCursor" -Funktion bei http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript#comment-3817 gefunden)

<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: das Skript geändert, so ist es doesn t verwende jQuery.

Quelle

2009-07-09 18:17:29 Emmett

-1

Gibt es einen Grund, warum Sie die Registerkarten nicht einfach nach der Bearbeitung ersetzen können? Ich habe ziemlich viel mit dem Ersetzen von Text herumgespielt, während ich ein Textfeld eingegeben habe, und fand es ... im besten Fall unpraktisch.

Quelle

2009-07-09 17:57:42 Dave

Der Punkt ist, dass der Benutzer in der Lage sein sollte, "Tabs" einzufügen, wie er die Seite verwendet, aber standardmäßig die Tab-Taste Zyklen auf das nächste Element konzentrieren. – user122147

Dann kommen Sie in Cross-Browser-Implementierungen von onkeydown, etwas, wozu ich noch nie mutig genug gewesen bin. Viel Glück! – 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>

Quelle

2013-05-29 15:00:41

Fangen Tabs in TextArea

Antwort

Verwandte Themen