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

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

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

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

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

или

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

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

Демо: https://jsfiddle.net/L96svw3c/ - несколько объясняет разницу между disabledи readOnly.

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

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

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

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

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

Вы также можете использовать 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" />

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

myInputBox.readonly = true;

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

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