Запретить пользователю вводить данные

Question

У меня input и button. При нажатии этой кнопки, JavaScript должен быть запущен. Мне нужно, чтобы этот ввод был ограничен от ввода, вставки, удаления ...

Когда я установил для него тег disabled, скрипты Java, которые взаимодействуют с ним, не работают.

<input disabled type="text" value="NOT BE CHANGED">
<button>Trigger some javascript</button>

Попробуйте на JSiddle

Как еще можно ограничить input от ввода, вставки, удаления ... но все же быть интерактивным с JavaScripts?

Answer 1

<input type="text" class="id-format" id="id-format" value="SHALL NOT BE CHANGED">

JQuery: вызовите свое поле <input> id с помощью JQuery и используйте функцию .prop(), чтобы установить для атрибута readonly значение true.

$('#myID').prop('readonly', true);

Pure JS: вызовите input id и добавьте функцию setAttribute (), чтобы добавить атрибут readonly и установить для него значение true.

document.getElementById("id-format").setAttribute('readonly', true);

ИЛИ установить свой атрибут встроенным в тег * input

<input type="text" class="id-format" id="id-format" readonly="true" value="SHALL NOT BE CHANGED">

Причина disabled не работает: если элемент отключен, он не реагирует на действия пользователя, не может быть сфокусирован и событие команды не сработает. В случае элементов формы он не будет представлен. Не устанавливайте для атрибута значение true, так как это предполагает, что вы можете установить его на false, чтобы снова включить элемент, что не соответствует действительности.

readonly: Type: boolean Если установлено значение true, то Пользователь не может изменить значение элемента. Однако значение все еще может быть изменено скриптом.

JS Fiddle Here: https://jsfiddle.net/72g6hpfc/

info:

disabled - https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/Attribute/disabled

readonly - https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/Attribute/readonly