Catching Tabs en TextArea

¿Alguien conoce una solución confiable para múltiples navegadores para capturar las pulsaciones de la tecla de tabulación en un campo de texto y reemplazar (en la posición correcta) 4 espacios? El área de texto se está utilizando para ingresar un ensayo y necesita esta característica.Catching Tabs en TextArea

Nota: Intenté usar FCKEditor, entre otros, que no capturó pestañas y tenía un montón de características que no necesitaba. Quiero una solución simple solo para atrapar pestañas.

Fuente

2009-07-09 user122147

Posiblemente duplicado http://stackoverflow.com/questions/3362/capturing-tab-key-in-text-box – freitass

Esa solución no funciona en línea (si las pestañas se producen en medio de la cadena) I piensa – user122147

No he probado extensivamente, pero esto parece que funciona:

(me encontré con la función "insertAtCursor" en 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>

EDITAR: Modificado el guión por lo que doesn' t use jQuery.

Fuente

2009-07-09 18:17:29 Emmett

-1

¿Hay alguna razón por la que no pueda simplemente reemplazar las pestañas después de que se haya realizado la edición? He jugado mucho reemplazando texto mientras escribo en un área de texto, y descubrí que es ... poco práctico en el mejor de los casos.

Fuente

2009-07-09 17:57:42 Dave

El punto es que el usuario debería poder insertar "pestañas" mientras usa la página, pero de forma predeterminada la tecla de tabulación cambia el foco al siguiente elemento. – user122147

Luego se está implementando en varios navegadores de onkeydown, que es algo que nunca he tenido el valor de probar. ¡Buena suerte! – 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>

Fuente

2013-05-29 15:00:41

Respuesta

Cuestiones relacionadas