Javascript implémente la méthode de traitement de l'indentation de la touche de tabulation dans les compétences textarea_javascript

L'exemple de cet article décrit comment implémenter le traitement d'indentation des touches de tabulation dans la zone de texte à l'aide de JavaScript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

J'ai cherché sur Internet des solutions connexes. D'autres ont utilisé deux ou trois lignes de javascript pour résoudre le problème, mais ils ont tous eu quelques problèmes mineurs. Il y en a aussi un qui utilise JQuery, qui est également très simple.

Le code javascript de cet article implémente la fonction de saisie de la touche TAB dans TEXTAREA et de son indentation automatique. Cependant, ce code ne peut pas être exécuté normalement dans Google Chrome.

Copier le code Le code est le suivant :

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

Une erreur se produira dans cette phrase :
exception non détectée TypeError : impossible de lire la propriété « sélection » de undefined
Le code s'exécute normalement dans IE, comme suit :

<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>

Lors de l'utilisation :

Copier le code Le code est le suivant :

e09aa8e5124754249366fd99a2b759f040587128eee8df8f03d0b607fe983014

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.