Как сделать ввод текста не редактируемым?

Question

Итак, у меня есть текстовый ввод

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

Вот мой CSS для этого

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; 

Есть ли какая-то настройка или хитрость для этого, я думал вместо этого сделать лейбл, но как насчет стиля. Как мне их конвертировать и есть ли лучший способ или это единственный способ?

Answer 1

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

Нет необходимости в оформлении.

См. <input> в MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

Answer 2

Вы можете добавить атрибут readonly к входу:

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

Дополнительная информация: http://www.w3schools.com/tags/att_input_readonly.asp

Answer 3

Вы можете использовать атрибут readonly, если хотите, чтобы ваш ввод только для чтения.И вы можете использовать атрибут disabled, если хотите, чтобы ввод отображался, но был полностью отключен (даже языки обработки, такие как PHP, не смогут их прочитать).

Answer 4

Просто для завершения доступны ответы:

Элемент ввода может быть доступен только для чтения или отключен (ни один из них не редактируется, но есть несколько отличий: focus, ...)

Хорошее объяснение можно найти здесь:
В чем разница между disabled = «disabled» и readonly = «readonly» для полей ввода формы HTML?

Как использовать:

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

Есть также несколько решений, чтобы сделать это через CSS или JavaScript, как объяснено здесь .

Answer 5

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

Вы могли видеть в https://www.w3schools.com/tags/att_input_readonly.asp

Способ установки «только для чтения»:

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

для отмены «только для чтения» (работа в jQuery):

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

Answer 6

добавить атрибут только для чтения

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

или -

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

CSS не требуется!

Answer 7

вам просто нужно добавить отключено в конце

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

Answer 8

Добавить readonly:

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

Если вы хотите, чтобы значение не отправлялось в форме, вместо этого добавьте атрибут disabled.

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

Нет способа использовать CSS, который всегда работает для этого.