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

Question

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

Answer 1

document.getElementById('foo').disabled = true;

EDIT

или

document.getElementById('foo').readOnly = true;

Обратите внимание, что readOnly должно быть в CamelCase для корректной работы в Firefox (магия).

Answer 2

Если вы знаете это при отображении страницы, что звучит так, как вы делаете, потому что в базе данных есть значение, лучше отключить ее при отображении вместо JavaScript. Для этого просто добавьте атрибут readonly (или disabled, если вы также хотите удалить его из представления формы) в <input>, например так: :

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

Answer 3

Если данные заполняются из базы данных, вы можете рассмотреть , а не , используя тег <input> для его отображения. Тем не менее, вы можете отключить его прямо в теге:

<input type='text' value='${magic.database.value}' disabled>

Если вам нужно позже отключить его с помощью Javascript, вы можете установить атрибут «disabled»:

document.getElementById('theInput').disabled = true;

Причина, по которой я предлагаю не показывать значение как <input>, заключается в том, что, по моему опыту, это вызывает проблемы с макетом. Если текст длинный, то в <input> пользователь должен будет попытаться прокрутить текст, а это не то, что обычные люди догадаются сделать. Если вы просто поместите его в <span> или что-то еще, у вас будет больше гибкости в оформлении.

Answer 4

Вы также можете с помощью 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" />

Answer 5

Получите ссылку на ваше поле ввода, как вам нравится (например, document.getElementById('mytextbox')) и установите для его свойства readonly значение true:

myInputBox.readonly = true;

В качестве альтернативы вы можете просто добавить это свойство inline (JavaScript не требуется):

<input type="text" value="from db" readonly="readonly" />