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

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

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

Спасибо.

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

Код в JSF:

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

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

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

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

Ответ 3

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

<input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/>

Ответ 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);