Як відключити тип введення = текст?

Я хочу відключити запис у полі введення типу 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 (магія) має бути у camelCase.

Демонстрація: https://jsfiddle.net/L96svw3c/ - дещо пояснює різницю між disabledі readOnly.

Якщо дані заповнені з бази даних, ви можете врахувати не використовувати <input>тег для їх відображення. Тим не менш, ви можете відключити його прямо в тезі:

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

Якщо вам потрібно пізніше відключити його за допомогою Javascript, ви можете встановити атрибут "вимкнено":

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

Причина, по якій я пропоную не відображати значення як, <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;

Крім того, ви можете просто додати цю властивість inline (не потрібен JavaScript):

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