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

344

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

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

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

html css html-input Мэтт Элхотиби
источник

Ответы:

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

Стайлинг не нужен.

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

BoltClock
источник
4
или readonly = "readonly", если вам нравится, что это все XML-ы, см. пример Стефана Мюллера ниже :)
Algy Taylor
1
@Algy Taylor: Да, это было в первоначальном ответе, когда в исходном вопросе был странный тег [xhtml], который сводил всех с ума по поводу того, какой стандарт действителен: /
BoltClock
есть ли способ , чтобы удалить этот красный круг , который появляется при наведении курсора мыши textareaс readonlyатрибутом?
Chaudhry Waqas
1
@ Shafizadeh - Нет, и это хорошо. Браузерам было бы сложно реализовать правильно, и людям было бы сложно понять. не пытайтесь сделать простое управление, выполнить сложную задачу. Разбейте свой ввод на части, причем каждый элемент прост (редактируемый элемент управления, затем нередактируемый элемент HTML, затем другой редактируемый элемент управления).
ToolmakerSteve
1
Также не забудьте проверить эту сторону сервера, если вы не хотите, чтобы значение сохранялось. В инструменте разработчика браузера легко удалить атрибут, что, в свою очередь, делает поле ввода снова доступным для редактирования.
Курт Ван ден Бранден
41

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

трясти
источник
2
Когда вы отправляете форму в файл php, он не будет читать отключенные входы. Это может быть то, что он имел в виду.
Carlos2W
3
в действительности происходит то, что отключенные входы НЕ ДАЖЕ отправляются при отправке формы, не имеют ничего общего с php, js или чем-либо еще.
Васильевич
28

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

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

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

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

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

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

jsidera
источник
5
Если вы собираетесь использовать, />чтобы закрыть свои теги, вы можете также расширить свои атрибуты до disabled="disabled"и readonly="readonly"тоже.
BoltClock
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)
Дж. Фан
источник
3

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

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

или -

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

не нужно CSS

Вибхаас Шривастава
источник
22
Что это добавляет к вопросу, которого мой ответ и ответ Стефана более чем за 3 года до этого не сделали? Вы даже отразили мое утверждение о том, что CSS не нужен.
BoltClock
2

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

<input type="text" value="3" class="field left" disabled>
Michan
источник
1
Значение не передается, если вы установили его как отключенное. Это может быть то, что вам нужно, но это не то, что спросили. Как примечание, я пришел сюда именно потому, что мой «отключенный» ввод не вел себя так, как я ожидал
Balmipour
2

Добавить readonly:

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

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

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

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

Зачем? CSS не может ничего «отключить». Вы все еще можете отключить отображение или видимость и использовать, pointer-events: noneно pointer-eventsне работает на версиях IE, которые вышли ранее, чем IE 11.

Zixuan
источник
0

если вы действительно хотите использовать CSS , используйте следующее свойство, которое сделает поле недоступным для редактирования.

pointer-events: none;
saadk
источник