Как запретить пользователю вводить текстовое поле без отключения поля?

Ответ 1

Альтернатива, отличная от Javascript, которую можно легко упустить: можете ли вы использовать атрибут readonly вместо атрибута disabled? Это предотвращает редактирование текста во входном файле, но браузеры вводят по-разному (менее вероятно, что он "серого" ) например <input readonly type="text" ...>

Ответ 2

если вы не хотите, чтобы поле выглядело "отключено" или smth, просто используйте это:

onkeydown="return false;"

это в основном то же самое, что и greengit, и Дерек, но немного короче

Ответ 3

$('input').keydown(function(e) {
   e.preventDefault();
   return false;
});

Ответ 4

$('input').keypress(function(e) {
    e.preventDefault();
});

Ответ 5

Разметка

<asp:TextBox ID="txtDateOfBirth" runat="server" onkeydown="javascript:preventInput(event);" onpaste="return false;"
                                TabIndex="1">

Script

function preventInput(evnt) {
//Checked In IE9,Chrome,FireFox
if (evnt.which != 9) evnt.preventDefault();}

Ответ 6

просто используйте onkeydown = "return false" для тега элемента управления, как показано ниже, он не будет принимать значения от пользователя.

    <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True"
ontextchanged="txtDate_TextChanged" onkeydown="return false" >
    </asp:TextBox>

Ответ 7

если текст появляется до активации клавиатуры, то он, вероятно, срабатывает при событии keydown. Вы еще что-то пробовали?

Ответ 8

Еще один метод, который можно использовать в зависимости от необходимости $('input').onfocus(function(){this.blur()}); Я думаю, что так вы его и напишете. Я не владею jQuery.

Ответ 9

Мне нравится добавить тот, который также работает с динамическим созданием DOM Davascript, например D3, где невозможно добавить:

//.attr(function(){if(condition){"readonly"]else{""}) //INCORRECT CODE !

для предотвращения действий над элементом ввода DOM в HTML добавьте readonly в класс:

var d = document.getElementById("div1");
d.className += " readonly";

ИЛИ в D3:

 .classed("readonly", function(){
   if(condition){return true}else{return false}
 })

И добавить к CSS или меньше:

.readonly {
  pointer-events: none;
}

Самое приятное в этом решении заключается в том, что вы можете динамически включать и выключать его в функции, чтобы его можно было интегрировать, например, в D3 во время создания (невозможно с единственным атрибутом "readonly" ).

чтобы удалить элемент из класса:

document.getElementById("MyID").className =
  document.getElementById("MyID").className.replace(/\breadonly\b/,'');

или использовать JQuery:

$( "div" ).removeClass( "readonly" )

или переключить класс:

$( "div" ).toggleClass( "readonly", addOrRemove );

Просто чтобы быть полным, удачи = ^)

Ответ 10

Один из вариантов - привязать обработчик к событию input.

Преимущество такого подхода заключается в том, что мы не предотвращаем поведение клавиатуры, которое ожидает пользователь (например, вкладка, страница вверх/вниз и т.д.).

Другим преимуществом является то, что он также обрабатывает случай, когда входное значение изменяется путем вставки текста через контекстное меню.

Этот подход работает лучше всего, если вы только заботитесь о том, чтобы оставить вход пустым. Если вы хотите сохранить определенное значение, вам придется отслеживать это где-то еще (в атрибуте данных?), Поскольку он не будет доступен, когда будет получено событие input.

const inputEl = document.querySelector('input');

inputEl.addEventListener('input', (event) => {
  event.target.value = '';
});

<input type="text" />

Ответ 11

Если вы хотите запретить пользователю добавлять что-либо, но предоставить ему возможность удалять символы:

<input value="CAN'T ADD TO THIS" maxlength="0" />