Digitando o caractere de tabulação nas caixas de texto do navegador


89

Muitas vezes, quando eu quiser formatar o texto na caixa de texto de uma página da Web, pressionarei a Tabtecla.

Infelizmente, isso não insere o caractere de tabulação, mas move o controle para o próximo elemento do formulário (como um botão ou uma caixa de seleção).

Para navegadores como Firefox / IE, existe uma maneira de obter o comportamento de formatação de uma guia, dentro de uma caixa de texto, digitando uma combinação de teclas?

Respostas:


10

O Tabinta é um complemento do Firefox que permite fazer isso.


4
Alguma solução para o Chrome?
22412

2
@SorinSbarnea: Veja minha resposta
Janus Troelsen

Não é mais compatível com o Firefox.
Rue.ap

Este é um plugin que funciona no Firefox 64: addons.mozilla.org/pt-BR/firefox/addon/textarea-tabbing
Stefan_Fairphone

Este plugin não existe mais (sem culpa da resposta, já faz quase uma década que a pergunta foi respondida e o Firefox mudou muito).
aoeu 15/04

63

No Windows, você pode pressionar Alt+ 09. Isso funciona apenas com as teclas numéricas do teclado numérico. (Solte Altdepois de pressionar a última tecla numérica.)


3
Certifique-se de estar usando as teclas NumPad
CatamountJack

@ Chris: Quando sigo essas instruções exatas, ele não insere um caractere de tabulação, mas age como a tecla tab. Você tentou isso em um navegador da web?
Casebash 9/04

@Casebash Funciona nesta mesma janela de comentários, no Chrome, no Windows 7 x64.
31510 Chris

2
Somente se você tiver o Windows e um teclado com um teclado numérico.
Caracol mecânico

1
... e se você estiver usando o Chrome. FF vê isso como a tecla tab, o IE parece não fazer nada. Mais uma vez, um para lembrar este hack Olden simples :)
Halil Özgür

50

Linux e outros sistemas POSIX (exceto Mac OS):

Para inserir guias nos aplicativos GTK + (como Firefox ou Chrome):

  1. Ctrl+ Shift+U

  2. Tipo 9

  3. Pressione SpaceouEnter

Fonte: Wikipedia: Entrada Unicode


Funciona, mas não é útil para recuar várias linhas ao mesmo tempo.
MYGz

13

No Safari e Firefox no Mac OS X, você pode pressionar ControlOptionTabpara inserir uma guia no campo de texto que está editando no momento.


7
Parece que este não funciona no Chrome 50 em El Cap
jcollum

1
Nem no Firefox 53 no Sierra.
Jason R. Coombs

1
@ JasonR.Coombs Ainda funciona no Safari, por isso é seguro assumir que algo mudou no Firefox nos quatro anos desde que escrevi esta resposta.
Daniel Beck

9

Abra o Bloco de notas ou editor de texto semelhante e inicie um novo documento em branco. Digite Tab. Copie o caractere de tabulação para a área de transferência. (No Windows, Ctrl+ A, Ctrl+ Cfará isso).

Agora volte para a área de texto no seu navegador. Posicione o cursor onde desejar e cole o caractere de tabulação. ( Ctrl+ Vno Windows).

Voila, pronto!


1
Ciro, ele está quebrado para caixas de texto regulares e campos de entrada de texto, ou apenas para elementos "editáveis ​​por conteúdo"? Porque se é apenas um problema para "contenteditable", pode não afetar a que muitas pessoas (o OP por exemplo) ...
Doin

2
Essa foi a solução mais simples, a menos que você precise fazer isso com frequência.
Jcollum # 23/16

8

Existe um plug-in do Chrome chamado Textarea Code Formatter .

Permite inserir guias nas caixas de texto no navegador Chrome. Também permite destacar várias linhas e inserir guias antes de cada linha selecionada.

No entanto, um problema é que geralmente você deseja um comportamento padrão de inserção de guias. Se você usar a guia para alternar entre caixas, poderá selecionar "desativado" por padrão nas opções.


4

Se é o seu site:

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

jQuery(document).ready(function () {

     $("textarea").tabby();

});

Carregue o jQuery e o plug-in primeiro e, em seguida, você pode tabular e criar uma aba e mudar + tab para "desabotoar" por assim dizer.

Para suporte em todo o navegador, você precisará usar uma extensão, script de usuário, plug-in etc. como: 46704 para Greasemonkey .


O link está morto. O que há com todo esse material do jQuery. Deve haver uma maneira de aceitar guias usando JavaScript simples. O plugin jQuery é sempre bom para uma solução já implementada, mas não é realmente a solução.
Triynko

Tente este chefe: stackoverflow.com/a/13130
Grizly

1

A grande vantagem do Tabinta no Firefox é que você pode mapear o caractere de tabulação para outra tecla de atalho, pois você realmente não deseja perder o comportamento padrão da tecla tab no navegador.

Com o Internet Explorer, você não tem solução em termos de extensões de navegador que eu conheço. Aqui, a única maneira é manter o caractere de tabulação na área de transferência, copiando-o anteriormente de algum outro programa, como o bloco de notas.

As soluções javascript requerem o nome da caixa de texto em que atuarão, portanto, isso está longe de ser ideal ou prático. Enquanto as combinações de códigos de teclas alt em ambos os navegadores ainda executam o evento normal de pressionamento de caracteres de tabulação, elas também não funcionam.


1

Eu estraguei um pouco o AutoHotkey para obter essa capacidade, e a única solução 'à prova de balas' que encontrei é realmente colar (não enviar) o próprio caractere de tabulação.

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

Acontece que essa ligação do AHK é útil até em editores de texto que lidam com o pressionamento de tecla TAB extra; por exemplo. IDE configurado para usar autoindent por espaços.




0

Para digitar a tecla tab em uma caixa de texto, você pode usar um script como este (a caixa de texto que aceita as teclas tab é nomeada 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}; ");

Ou melhor, para evitar codificação duro, você pode colocar esse código em uma função chamada EnableTabType. A função possui apenas um parâmetro, que especifica qual é o TextBoxcontrole onde você precisa habilitar a digitação dos caracteres da guia.

[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}; ");
}

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


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.