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

123

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

javascript html

— kawtousse
источник

173

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

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

— Ник Крейвер
источник

81

Я не знаю, почему это набирает голоса, это не отвечает на вопрос. Мы ждали ответов javascript.

— Софи

3

@Sophie, это наиболее правильный способ для спрашивающего сделать это в зависимости от ситуации, возможно, следует изменить заголовок.

— Ник Крейвер

6

отключенный режим предотвращает события щелчка в поле ввода, только чтение - нет. FYI.

— knutole

Чтобы поле ввода «только для чтения» выглядело как поле «отключено», установите 'style = "color: gray; background-color: # F0F0F0;"'. (это был комментарий к этому ответу )

— Джейк Торонто

2

Имейте в виду, что браузеры могут игнорировать атрибут "disabled" или "readonly", и на этот метод не следует полагаться, чтобы надежно предотвратить обновление данных ... если серверный код, обрабатывающий форму, все равно будет принимать значение из этого поля и обновить его, любой, у кого хватит смекалки, чтобы создать свою собственную форму, может обойти это «отключение» ... это для удобства пользовательского интерфейса только в доверенной среде. Реальный способ предотвратить это - использовать логику на стороне сервера.

— Аарон Валлентин,

206

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

или

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

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

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

— hudolejev
источник

3

Это сработало для меня. Версия JQuery - $ ('input'). Prop ('disabled', true)

— Даниэль Сунь Ян

Я опоздал на семь лет - но есть ли какая-то семантическая разница между этими двумя в 2017 году?

— Жюль

2

Вы совсем не опоздали, магия все еще существует (: я не помню, на каких платформах я тестировал тогда, но сегодня readonly(строчные буквы) все еще не работают в Firefox 52 на Ubuntu - должно быть, верблюжий регистр.

— hudolejev

Почему у меня это не работает? Я сделал inputэлемент id="gate"и пробую ваш код, который, похоже, у меня не работает ...

— Гнев Волан-де-Морта

21

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

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

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

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

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

— Заостренный
источник

3

Имейте в виду, что отключение может сделать текст почти нечитаемым в некоторых браузерах. Возможно, вам будет лучше использовать атрибут readonly, например, <input type = "text" value = "foo" readonly>

— Олли Ходжсон,

7

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

Развернуть фрагмент

— Чани Поз
источник

1

@Chani Poz Вы вызываете собственный установщик js для объекта jquery, это приведет к ошибке. $ ('# foo') [0] .disabled = true или $ ('# foo'). get (0) .disabled = true выполнит свою работу

— Арек Костржеба

6

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

myInputBox.readonly = true;

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

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

— Роатин Март
источник

Если вы пишете HTML (в отличие от XHTML), это будет <input type = "text" value = "from db" readonly>

— Олли Ходжсон