Escribir el carácter de tabulación en los cuadros de texto del navegador

89

Muchas veces, cuando quiero formatear texto dentro del cuadro de texto de una página web, presiono la Tabtecla.

Desafortunadamente, eso no inserta el carácter de tabulación, sino que mueve el control al siguiente elemento del formulario (como un botón o una casilla de verificación).

Para navegadores como Firefox / IE, ¿hay alguna forma de obtener el comportamiento de formateo de una pestaña, dentro de un cuadro de texto, escribiendo una combinación de teclas?

Rohit
fuente

Respuestas:

9

Tabinta es un complemento de Firefox que te permite hacer esto.

invertir; poner boca abajo o en la posición opuesta, orden o arreglo; Boca abajo
fuente
44
¿Alguna solución para Chrome?
sorin
2
@SorinSbarnea: Mira mi respuesta
Janus Troelsen
Ya no es compatible con Firefox.
rory.ap
Este es un plugin que funciona en Firefox 64: addons.mozilla.org/en-US/firefox/addon/textarea-tabbing
Stefan_Fairphone
1
Este complemento ya no existe (sin culpa de la respuesta, ha pasado casi una década desde que se respondió la pregunta y Firefox ha cambiado mucho).
aoeu
63

En Windows, puede presionar Alt+ 09. Esto solo funciona con las teclas numéricas del teclado numérico. (Suelte Altdespués de presionar la última tecla numérica).

ta.speot.is
fuente
44
Asegúrese de estar usando las teclas NumPad
CatamountJack
@ Chris: Cuando sigo esas instrucciones exactas, no inserta un carácter de tabulación, sino que actúa como la tecla de tabulación. ¿Intentaste esto en un navegador web?
Casebash el
@Casebash Funciona en esta misma ventana de comentarios, en Chrome, en Windows 7 x64.
Chris
2
Solo si tiene Windows y un teclado con un teclado numérico.
Caracol mecánico
1
... y si estás usando Chrome. FF lo ve como la tecla de tabulación, IE no parece hacer nada. Nuevamente, +1 por recordar este simple truco antiguo :)
Halil Özgür
50

Linux y otros sistemas POSIX (excepto Mac OS):

Para ingresar pestañas en aplicaciones GTK + (como Firefox o Chrome):

  1. Ctrl+ Shift+U

  2. Tipo 9

  3. Presione SpaceoEnter

Fuente: Wikipedia: Entrada Unicode

Janus Troelsen
fuente
Funciona pero no es útil para sangrar varias líneas a la vez.
MYGz
13

En Safari y Firefox en Mac OS X, puede presionar ControlOptionTabpara insertar una pestaña en el campo de texto que está editando actualmente.

Daniel Beck
fuente
77
Parece que esto no funciona en Chrome 50 en El Cap
jcollum
1
Tampoco en Firefox 53 en Sierra.
Jason R. Coombs
1
@ JasonR.Coombs Todavía funciona en Safari, por lo que es seguro asumir que algo cambió en Firefox en los cuatro años transcurridos desde que escribí esta respuesta.
Daniel Beck
9

Abra el Bloc de notas o un editor de texto similar e inicie un nuevo documento en blanco. Tipo Tab. Copie su carácter de tabulación en el portapapeles. (En Windows, Ctrl+ A, Ctrl+ Chará esto).

Ahora vuelva al área de texto en su navegador. Coloque el cursor donde lo desee y pegue el carácter de tabulación. ( Ctrl+ Ven Windows).

Voila, hecho!

Doin
fuente
1
Ciro, ¿está roto para cuadros de texto normales y campos de entrada de texto, o simplemente elementos "contentables"? Porque si es solo un problema para "contenteditable", podría no afectar a tanta gente (el OP por ejemplo) ...
Doin
2
Esta fue la solución más simple, a menos que necesite hacer esto con frecuencia.
jcollum
8

Hay un complemento de Chrome llamado Textarea Code Formatter .

Le permite insertar pestañas en cuadros de texto en el navegador Chrome. También le permite resaltar varias líneas e insertar pestañas antes de cada línea seleccionada.

Sin embargo, un problema es que a menudo desea un comportamiento de inserción de pestaña estándar. Si utiliza la pestaña para alternar entre los cuadros, puede seleccionar "deshabilitado" de forma predeterminada en las opciones.

Jeromy Anglim
fuente
4

Si es tu sitio:

Complemento jQuery: http://teddevito.com/demos/textarea.html

jQuery(document).ready(function () {

     $("textarea").tabby();

});

Cargue jQuery y el complemento primero, luego puede tabular y crear una pestaña, y cambiar + tab a "deshacer pestañas" por así decirlo.

Para obtener soporte en todo el navegador, deberá utilizar una extensión, un script de usuario, un complemento, etc., como: 46704 para Greasemonkey .

Grizly
fuente
El enlace está muerto. ¿Qué pasa con todas estas cosas de jQuery? Tiene que haber una manera de aceptar pestañas usando JavaScript simple. El complemento jQuery siempre es bueno para una solución ya implementada, pero en realidad no es la solución.
Triynko
Pruebe este jefe: stackoverflow.com/a/13130
Grizly
1

La gran ventaja de Tabinta en Firefox es que puede asignar el carácter de tabulación a otra tecla de acceso rápido, ya que realmente no desea perder el comportamiento predeterminado de la tecla de tabulación en el navegador.

Con Internet Explorer no tiene una solución en cuanto a las extensiones de navegador que conozco. Aquí, la única forma es mantener el carácter de tabulación en el portapapeles copiándolo previamente desde algún otro programa como el bloc de notas.

Las soluciones de JavaScript requieren el nombre del cuadro de texto en el que actuarán, por lo que esto está lejos de ser ideal o práctico. Si bien las combinaciones de códigos de tecla alternativos en ambos navegadores aún ejecutan el evento normal de pulsación de teclas de caracteres de tabulación para que tampoco funcionen.

Un enano
fuente
1

Me he equivocado un poco con AutoHotkey para obtener esta habilidad, y la única solución a prueba de balas que encontré es realmente pegar (no enviar) el carácter de tabulación en sí.

;
; TAB character
; pasted from clipboard
; win tab
;
#tab::
old_clip:=clipboard
clipboard:=A_Tab
clipWait
sendInput,^v
clipboard:=old_clip
clipWait
return

Resulta que este enlace AHK es incluso útil en editores de texto que manejan la pulsación de tecla TAB extra; p.ej. IDE configurado para usar autoindent-by-spaces.

mi f
fuente
0

Tab Grabber es un poco como Tabinta, solo para Chrome (permite TAB en campos de área de texto).

SiteKickr
fuente
0

Para escribir la tecla de tabulación en un cuadro de texto, puede usar una secuencia de comandos como esta (se nombra el cuadro de texto que acepta las teclas de tabulación txtLongText):

[VB.NET]

txtLongText.Attributes.Add("onkeydown", _
"if(event.which || event.keyCode){if ((event.which == 9)" & _ 
"|| (event.keyCode == 9)) {document.getElementById('" & _ 
txtLongText.ClientID + "').selection = " & _
document.selection.createRange();" & _ 
txtLongText.ClientID & ".selection.text = " & _
" String.fromCharCode(9);return false;}} else {return true}; ")

[C#]

txtLongText.Attributes.Add("onkeydown", 
"if(event.which || event.keyCode){if ((event.which == 9)" +
"|| (event.keyCode == 9)) {document.getElementById('"+
txtLongText.ClientID + "').selection = document.selection.createRange();" + 
txtLongText.ClientID + ".selection.text = String.fromCharCode(9);return false;}} else {return true}; ");

O mejor, para evitar la codificación rígida, puede poner este código en una función llamada EnableTabType. La función tiene solo un parámetro, que especifica qué es el TextBoxcontrol donde debe habilitar la escritura de caracteres de tabulación.

[VB.NET]

Public Sub EnableTabType(tb As TextBox)
    tb.Attributes.Add("onkeydown", _
    "if(event.which || event.keyCode){if((event.which == 9)" & _ 
    "|| (event.keyCode == 9)) {document.getElementById('" & _ 
    tb.ClientID & "').selection=document.selection.createRange();" & _
    tb.ClientID & ".selection.text = " & _
    " String.fromCharCode(9);return false;}}else{return true};")
End Sub 

[C#]

public void EnableTabType(TextBox tb)
{ 
    tb.Attributes.Add("onkeydown", 
    "if(event.which || event.keyCode){if ((event.which == 9)" +
    "|| (event.keyCode == 9)) {document.getElementById('"+
    tb.ClientID + "').selection = document.selection.createRange();" +
    tb.ClientID + ".selection.text = String.fromCharCode(9);return false;}} else {return true}; ");
}

Fuente: http://www.beansoftware.com/ASP.NET-Tutorials/Access-Tab-Key.aspx

admintech
fuente
0

o usando ahk para insertar 4 * espacio en el editor:

^Right::
tabspace:="    "
send,%tabspace%    
return 

puede ver la explicación de los detalles del código en el código ahk

Lu Zhao
fuente