Heim  >  Artikel  >  Web-Frontend  >  Javascript implementiert die Einrückungsverarbeitungsmethode der Tabulatortaste in textarea_javascript-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:52:261538Durchsuche

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>
Bei Verwendung:


Code kopieren Der Code lautet wie folgt:
e09aa8e5124754249366fd99a2b759f040587128eee8df8f03d0b607fe983014
Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn