Javascript implementiert die Einrückungsverarbeitungsmethode der Tabulatortaste in textarea_javascript-Fähigkeiten-js-Tutorial-php.cn

Javascript implementiert die Einrückungsverarbeitungsmethode der Tabulatortaste in textarea_javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:52:26

Original

1518 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie die Einrückungsverarbeitung von Tabulatortasten im Textbereich mithilfe von JavaScript implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ich habe im Internet nach entsprechenden Lösungen gesucht. Andere haben zwei oder drei Zeilen Javascript verwendet, um das Problem zu lösen, aber alle hatten einige kleinere Probleme. Es gibt auch eine, die JQuery verwendet, was ebenfalls sehr einfach ist.

Der Javascript-Code in diesem Artikel implementiert die Funktion, die TAB-Taste in TEXTAREA einzugeben und automatisch einzurücken. Dieser Code kann jedoch in Google Chrome nicht normal ausgeführt werden

Code kopieren Der Code lautet wie folgt:

sel =event.srcElement.document.selection.createRange()

In diesem Satz tritt ein Fehler auf:
Nicht erfasste Ausnahme TypeError: Eigenschaft „Auswahl“ von undefiniert
kann nicht gelesen werden Der Code wird im IE wie folgt normal ausgeführt:

<mce:script type="text/javascript">
<!-- 
function editTab() 
{ 
  var code, sel, tmp, r 
  var tabs="" 
  event.returnValue = false 
  sel =event.srcElement.document.selection.createRange() 
  r = event.srcElement.createTextRange() 
  switch (event.keyCode) 
  { 
    case (8)  : 
      if (!(sel.getClientRects().length > 1)) 
      { 
        event.returnValue = true 
        return 
      } 
      code = sel.text 
      tmp = sel.duplicate() 
      tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) 
      sel.setEndPoint("startToStart", tmp) 
      sel.text = sel.text.replace(/^/t/gm, "") 
      code = code.replace(/^/t/gm, "").replace(//r/n/g, "/r") 
      r.findText(code) 
      r.select() 
      break 
    case (9)  : 
      if (sel.getClientRects().length > 1) 
      { 
        code = sel.text 
        tmp = sel.duplicate() 
        tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) 
        sel.setEndPoint("startToStart", tmp) 
        sel.text = "/t"+sel.text.replace(//r/n/g, "/r/t") 
        code = code.replace(//r/n/g, "/r/t") 
        r.findText(code) 
        r.select() 
      } 
      else 
      { 
        sel.text = "/t" 
        sel.select() 
      } 
      break 
    case (13)  : 
      tmp = sel.duplicate() 
      tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) 
      tmp.setEndPoint("endToEnd", sel) 
      for (var i=0; tmp.text.match(/^[/t]+/g) && i<tmp.text.match(/^[/t]+/g)[0].length; i++)  tabs += "/t" 
      sel.text = "/r/n"+tabs 
      sel.select() 
      break 
    default   : 
      event.returnValue = true 
      break 
  } 
} 
// -->
</mce:script>

Nach dem Login kopieren

Bei Verwendung:

Code kopieren Der Code lautet wie folgt:

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.