Как отключить тип ввода = текст?

Я хочу отключить запись в поле ввода типа 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" />