Como faço para que uma entrada de texto não seja editável?

344

Então, eu tenho uma entrada de texto

<input type="text" value="3" class="field left">

Aqui está o meu CSS para ele

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px;

Existe uma configuração ou um truque para isso, eu estava pensando em fazer uma gravadora, mas que tal o estilo? Como os converto e existe um caminho melhor ou esse é o único caminho?

html css html-input Matt Elhotiby
fonte

Respostas:

706 
<input type="text" value="3" class="field left" readonly>

Não é necessário estilo.

Veja <input>no MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

BoltClock
fonte
4
ou readonly = "readonly" se você gosta de ser tudo XML-y, veja o exemplo de Stephan Muller abaixo :)
Algy Taylor
11
@Algy Taylor: Sim, isso estava na resposta original quando a pergunta original tinha uma tag [xhtml] rebelde que deixou todo mundo maluco sobre o que era válido para qual padrão: /
BoltClock
Existe alguma maneira de remover esse círculo vermelho que aparece quando você passa o mouse sobre textareacom readonlyatributo?
Chaudhry Waqas
11
@ Shafizadeh - Não, e isso é uma coisa boa. Seria difícil para os navegadores implementarem corretamente e confuso para as pessoas entenderem. não tente fazer um controle simples executar uma tarefa complexa. Divida sua entrada em partes, com cada parte simples (um controle editável, um elemento HTML não editável e outro controle editável).
Home
11
Verifique também este lado do servidor se você não quiser que o valor seja persistente. É fácil na ferramenta de desenvolvedor do navegador remover o atributo, que, por sua vez, torna o campo de entrada novamente editável.
Kurt Van den Branden
41

Você pode usar o readonlyatributo, se desejar que sua entrada seja apenas lida. E você pode usar o disabledatributo, se quiser que a entrada seja mostrada, mas totalmente desabilitada (mesmo linguagens de processamento como PHP não poderão lê-las).

solavanco
fonte
2
Quando você envia um formulário para um arquivo php, ele não lê entradas desativadas. Pode ser o que ele quis dizer.
Carlos2W 29/03
3
o que realmente acontece é que as entradas desativadas NÃO SÃO MESMO enviadas quando você envia um formulário, não tem nada a ver com php, js ou qualquer outra coisa.
22816 vasilevich
28

Apenas para completar as respostas disponíveis:

Um elemento de entrada pode ser somente leitura ou desabilitado (nenhum deles é editável, mas há algumas diferenças: foco, ...)

Uma boa explicação pode ser encontrada aqui:
Qual é a diferença entre disabled = "disabled" e readonly = "readonly" para os campos de entrada do formulário HTML?

Como usar:

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

Existem também algumas soluções para fazê-lo através de CSS ou JavaScript, conforme explicado aqui .

jsidera
fonte
5
Se você for usar />para fechar suas tags, também poderá expandir seus atributos para disabled="disabled"e readonly="readonly"também.
BoltClock
5 
<input type="text" value="3" class="field left" readonly>

Você pode ver em https://www.w3schools.com/tags/att_input_readonly.asp

O método para definir "somente leitura":

$("input").attr("readonly", true)

para cancelar "somente leitura" (trabalho em jQuery): 

$("input").attr("readonly", false)
J. Fan
fonte
3

adicione o atributo somente leitura

<input type="text" value="3" class="field left" readonly="readonly" >

ou -

<input type="text" value="3" class="field left" readonly>

nenhum css necessário!

Vibhaas Srivastava
fonte
22
O que isso acrescenta à pergunta que minha resposta e a resposta de Stephan de mais de três anos antes ainda não o fizeram? Você até espelhou minha declaração sobre CSS não ser necessário.
BoltClock
2

você só precisa adicionar desativado no final

<input type="text" value="3" class="field left" disabled>
Michan
fonte
11
O valor não será enviado se você o definir como desativado. Pode ser o que você precisa, mas não foi o que foi solicitado. Como uma nota lateral, eu vim aqui precisamente porque a minha entrada "disabled" não estava se comportando como eu estava esperando
Balmipour
2

Adicionar readonly:

<input type="text" value="3" class="field left" readonly>

Se você deseja que o valor não seja enviado em um formulário, adicione o disabledatributo

<input type="text" value="3" class="field left" disabled>

Não há como usar CSS que sempre funcione para fazer isso.

Por quê? O CSS não pode "desativar" nada. Você ainda pode desativar a exibição ou a visibilidade e o uso, pointer-events: nonemas pointer-eventsnão funciona nas versões do IE lançadas antes do IE 11.

zixuan
fonte
0

se você realmente deseja usar CSS , use a propriedade a seguir, que tornará o campo não editável.

pointer-events: none;
saadk
fonte
Oh oh oh. Isso não funciona em alguns navegadores.
Zixuan