Выделение поля ввода текста выглядит отключенным, но действует только для чтения

Question

У меня есть поле ввода HTML, которое я хочу, чтобы пользователь мог видеть, но не редактировать. Если я отмечу поле как «отключенное», оно не будет отправлено вместе с остальной частью формы. Если я отмечу его как «только для чтения», он будет вести себя так, как я хочу, но все равно выглядит включенным (по крайней мере, в Chrome).

По сути, я хочу, чтобы поле ввода выглядело как отключенное поле, но ведет себя как поле только для чтения. Возможно ли это?

Спасибо.

edit: Кроме того, если я отмечу его как «только для чтения», все равно можно изменить его значение, дважды щелкнув его и выбрав что-то, что было ранее.

Answer 1

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

Answer 2

У меня была похожая проблема с JSF, в которой скрытое поле работало для сохранения необходимого мне значения, но значение в поле ввода, доступном только для чтения или отключенном, очищалось, если проверка формы после отправки не удалась. Я нашел альтернативное решение, которое, кажется, работает довольно элегантно, оставляя поле ввода технически редактируемым, но которое предотвращает редактирование, делая размытие, как только оно получает фокус. Хотя у вас может не быть той же проблемы со средой на стороне сервера, которую я имел с JSF (которая не передает значения даже из полей ввода, помеченных просто для чтения), вы можете использовать ту же технику в вашей ситуации, с В результате вам не нужно отдельное скрытое поле для сохранения значения. Однако, как и во втором ответе, он не решает проблему отключения поля look , по крайней мере, без дополнительного CSS-кода.

Код в JSF:

<p:inputText id="entid" value="#{RequestBean.entityID}" onfocus="blur();" />

, который становится следующим HTML:

<input id="entid" type="text" value="10003" onfocus="blur();" />

Подробнее об этом можно узнать здесь: Как сохранить параметры просмотра JSF при проверке

Answer 3

Вы можете использовать css, чтобы он выглядел так, как вы хотите, хотя это может не совпадать с другими отключенными полями в браузере / платформе.

Answer 4

Я знаю, что ответили, но хотел привести мой пример CSS.

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

С границей слева и сверху, имеющей более темный цвет и т. Д. Итак, мы решили это с помощью этого кода CSS.

input[readonly]{
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px;
  background-color: rgb(235, 235, 228);
  color: rgb(84, 84, 84);
  padding: 2px 0px;
}

Сделал jsfiddle , чтобы вы, ребята, могли взглянуть поближе.

В Chrome все выглядит хорошо, в других браузерах вам нужно изменить цвета abit. Как и в Firefox, вам нужно изменить цвет и цвет фона на т. Д.

background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);