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

Так что у меня есть текстовый ввод

<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;

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

7 297
html css html-input

7 ответов:

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

нет необходимости в стилизации.

посмотреть <input> на MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

623

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

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

Подробнее: http://www.w3schools.com/tags/att_input_readonly.asp

57

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

38

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

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

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

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

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

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

22

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

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

или

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

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

3

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

<input type="text" value="3" class="field left" disabled>
3
<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)
2