Як завадити користувачеві вводити текст у текстове поле, не відключаючи поле?

Я намагався:

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

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

});

але він трохи видаляє введений текст після введення листа. Чи можна як-небудь завадити користувачеві повністю вводити текст, не вдаючись до вимкнення текстового поля?

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

якщо ви не хочете, щоб поле виглядало "відключеним" або smth, просто скористайтеся цим:

onkeydown="return false;"

це в основному те саме, що сказали Грінгіт і Дерек, але трохи коротше

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

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

Якщо ви хочете заборонити користувачеві що-небудь додавати, але надайте йому можливість стирати символи:

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

Встановлення maxlengthатрибуту введення "0"робить так, що користувач не може додавати вміст, але все одно стирає вміст, як хоче .

Але якщо ви хочете, щоб воно було справді постійним і незмінним:

<input value="THIS IS READONLY" onkeydown="return false" />

Встановлюючи onkeydownатрибут, return falseзмушує вхід ігнорувати користувача keypressesна ньому, тим самим не даючи їм змінювати або впливати на значення.

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

Розмітка

<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();}

Мені подобається додати такий, який також працює з динамічним створенням DOM у JavaScript, як 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 під час створення (неможливо з одним атрибутом "тільки для читання").

щоб видалити елемент з класу:

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

або скористайтеся Jquery:

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

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

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

Щоб бути повним, удачі = ^)

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

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

Один із варіантів - прив’язати обробник до 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.

Для рішення лише для css спробуйте налаштувати pointer-events: noneна вході.