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

пробовал:

$('input').keyup(function() {

   $(this).attr('val', '');

});

но он удаляет введенный текст немного после ввода буквы. Есть ли в любом случае, чтобы запретить пользователю вводить текст полностью, не прибегая к отключению текстового поля?

10 57
javascript html jquery

10 ответов:

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

125

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

onkeydown="return false;"

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

55
$('input').keydown(function(e) {
   e.preventDefault();
   return false;
});
29
$('input').keypress(function(e) {
    e.preventDefault();
});
15

разметки

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

скрипт

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

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

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

Если текст появляется до keyup, то он, вероятно, срабатывает в keydown события. Ты уже пробовал это сделать?

0

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

0

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

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

чтобы предотвратить действия на входном элементе DOM HTML, добавьте только чтение в класс:

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" )

или toggle класс:

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

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

0

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

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

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

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

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

inputEl.addEventListener('input', (event) => {
  event.target.value = '';
});
<input type="text" />

протестировано в Safari 10, Firefox 49, Chrome 54, IE 11.

0