Como desativar um tipo de entrada = texto?

123

Desejo desativar a gravação em um campo de entrada do tipo textusando JavaScript, se possível. O campo de entrada é preenchido a partir de um banco de dados; é por isso que não quero que o usuário modifique seu valor.

javascript html

— kawtousse
fonte

172

Se você souber disso quando a página for renderizada, o que parece ser porque o banco de dados tem um valor, é melhor desativá-lo quando renderizado, em vez de JavaScript. Para fazer isso, basta adicionar oreadonly atributo (ou disabled, se você quiser removê-lo também do envio do formulário) ao <input>, da seguinte maneira:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

— Nick Craver
fonte

81

Não sei por que isso recebe votos, mas não responde à pergunta. Estávamos esperando respostas em javascript.

— Sophie

3

@ Sophie, é a maneira mais correta de o solicitante fazer isso com base na situação deles, talvez uma mudança de título esteja em ordem.

— Nick Craver

6

O modo desativado evita eventos de clique na caixa de entrada, somente leitura não. Para sua informação.

— knutole

Para que o campo de entrada "somente leitura" tenha a aparência do campo "desativado", defina 'style = "color: grey; background-color: # F0F0F0;"'. (este foi um comentário para esta resposta )

— Jake Toronto

2

Lembre-se de que os navegadores são livres para ignorar o atributo "desativado" ou "somente leitura" e esse método não deve ser utilizado para impedir a atualização confiável dos dados ... se o código do servidor que estiver processando o formulário ainda aceitar um valor desse campo e atualizá-lo, qualquer pessoa com conhecimento suficiente para criar seu próprio formulário pode ignorar essa "desativação" ... isso é apenas para conveniência da interface do usuário em um ambiente confiável. A maneira real de evitá-lo é com a lógica do lado do servidor.

— Aaron Wallentine

206

document.getElementById('foo').disabled = true;

ou

document.getElementById('foo').readOnly = true;

Observe que readOnly deve estar no camelCase para funcionar corretamente no Firefox (mágico).

Demo: https://jsfiddle.net/L96svw3c/ - explica um pouco a diferença entre disablede readOnly.

— hudolejev
fonte

3

Isso funcionou para mim. Versão jQuery é $ ( 'input') prop ( 'deficiente', true).

— Daniel Sun Yang

Estou sete anos atrasado com isso - mas há alguma diferença semântica entre os dois em 2017?

— Jules

2

Você não está atrasado, a mágica ainda está lá (: não me lembro em quais plataformas eu testei naquela época, mas hoje readonly(em minúsculas) ainda não funciona no Firefox 52 no Ubuntu - deve ser um caso de camelo.

— precisa saber é o seguinte

Por que isso não funciona para mim? Fiz um inputelemento com id="gate"e eu tento o seu código, o que não parece estar a trabalhar para mim ...

— de Voldemort Wrath

21

Se os dados forem preenchidos no banco de dados, você pode considerar não usar uma <input>tag para exibi-los. No entanto, você pode desativá-lo diretamente na tag:

<input type='text' value='${magic.database.value}' disabled>

Se você precisar desativá-lo com Javascript posteriormente, poderá definir o atributo "desativado":

document.getElementById('theInput').disabled = true;

A razão pela qual sugiro não mostrar o valor como um <input>é que, na minha experiência, ele causa problemas de layout. Se o texto for longo, em um <input>usuário o usuário precisará tentar rolar o texto, o que não é algo que as pessoas normais acham que devem fazer. Se você simplesmente soltá-lo em <span>algo ou algo, você tem mais flexibilidade de estilo.

— Pontudo
fonte

3

Lembre-se de que a desativação pode tornar o texto quase ilegível em alguns navegadores. Você pode ser melhor fora com o atributo somente leitura, por exemplo, <input type = valor "text" = "foo" readonly>

— Olly Hodgson

7

Você também pode, por jquery:

$('#foo')[0].disabled = true;

Exemplo de trabalho:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

Expandir snippet

— Chani Poz
fonte

1

@ Chani Poz Você está chamando o js setter nativo no objeto jquery, isso resultará em erro. $ ( '# foo') [0] .disabled = true ou $ ( '# foo') get (0) .disabled = true irá fazer o trabalho.

— Arek Kostrzeba

6

Obtenha uma referência à sua caixa de entrada da maneira que desejar (por exemplo document.getElementById('mytextbox')) e configure sua readonlypropriedade para true:

myInputBox.readonly = true;

Como alternativa, você pode simplesmente adicionar essa propriedade em linha (não é necessário JavaScript):

<input type="text" value="from db" readonly="readonly" />

— Roatin Marth
fonte

Se você é HTML escrita (em oposição a XHTML) que seria <input type = valor "text" = "a partir db" readonly>

— Olly Hodgson