Я хочу отключить запись в поле ввода типа text
, используя JavaScript, если это возможно.
Поле ввода заполняется из базы данных; поэтому я не хочу, чтобы пользователь изменял его значение.
Как отключить тип ввода = текст?
Ответ 1
Если вы знаете это, когда страница отображается, как это звучит, потому что в базе данных есть значение, лучше отключить ее при визуализации вместо JavaScript. Для этого просто добавьте атрибут readonly
(или disabled
, если вы также хотите удалить его из представления формы) в <input>
, например:
<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />
Ответ 2
document.getElementById('foo').disabled = true;
ИЗМЕНИТЬ
или
document.getElementById('foo').readOnly = true;
Обратите внимание, что readOnly
должен быть в CamelCase правильно работать в Firefox (магия).
Ответ 3
Если данные заполнены из базы данных, вы можете не использовать тег <input>
для его отображения. Тем не менее, вы можете отключить его прямо в теге:
<input type='text' value='${magic.database.value}' disabled>
Если вам нужно отключить его с помощью Javascript позже, вы можете установить атрибут "disabled":
document.getElementById('theInput').disabled = true;
Причина, по которой я предлагаю не показывать значение как <input>
, заключается в том, что, по моему опыту, это вызывает проблемы с компоновкой. Если текст длинный, то в <input>
пользователю нужно будет прокрутить текст, который не будет нормальным, как предполагают люди. Если вы просто поместите его в <span>
или что-то еще, у вас будет больше гибкости стилизации.
Ответ 4
Получите ссылку на поле ввода, как вам нравится (например, document.getElementById('mytextbox')
), и установите для свойства readonly
значение true
:
myInputBox.readonly = true;
В качестве альтернативы вы можете просто добавить это свойство в строку (без необходимости использования JavaScript):
<input type="text" value="from db" readonly="readonly" />
Ответ 5
Вы также можете с помощью jquery:
$('#foo')[0].disabled = true;
Рабочий пример:
$('#foo')[0].disabled = true;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />