Attraper les onglets dans TextArea

Est-ce que quelqu'un connaît une solution fiable et inter-navigateurs pour intercepter les presses de la touche de tabulation dans un champ de zone de texte et remplacer (dans la bonne position) 4 espaces? La zone de texte est utilisée pour entrer un essai et a besoin de cette fonctionnalité.Attraper les onglets dans TextArea

Note: J'ai essayé d'utiliser FCKEditor, entre autres, qui n'accueillait pas les onglets et avait un tas de fonctionnalités dont je n'avais pas besoin. Je veux une solution simple juste pour attraper les onglets.

Source

2009-07-09 user122147

Peut-être dupliqués http://stackoverflow.com/questions/3362/capturing-tab-key-in-text-box – freitass

Cette solution ne fonctionne pas en ligne (si les onglets apparaissent au milieu de la chaîne) I penser – user122147

Je n'ai pas testé intensivement, mais cela semble fonctionner:

(je trouve la fonction "insertAtCursor" à 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: Modification du script pour qu'il n » t utilisez jQuery.

Source

2009-07-09 18:17:29 Emmett

-1

Y a-t-il une raison pour laquelle vous ne pouvez pas simplement remplacer les onglets une fois l'édition terminée? J'ai beaucoup joué avec le remplacement du texte en tapant une zone de texte, et je l'ai trouvé ... impraticable au mieux.

Source

2009-07-09 17:57:42 Dave

Le fait est que l'utilisateur devrait pouvoir insérer des "onglets" quand il utilise la page, mais par défaut les cycles de touches de tabulation se concentrent sur l'élément suivant. – user122147

Ensuite, vous vous lancez dans des implémentations cross-browser de onkeydown, ce que je n'ai jamais été assez courageux pour essayer. Bonne chance! – 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>

Source

2013-05-29 15:00:41

Attraper les onglets dans TextArea

Répondre

Questions connexes