Создание текстового поля недействительным, а не только для чтения

Question

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

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

<input id="datePiccc" type="text" class="dates" /> 

Answer 1

Вы можете использовать приведенный ниже код. Это сделает поле ввода текста кликабельным, но когда пользователь вводит что-либо, ничего не произойдет.

document.getElementById('datePiccc').onkeydown = function(e){ 
    e.preventDefault(); 
} 

Fiddle Demo

---

Как указывал NNNNNN, onkeydown является лучшим вариантом, чем onkeypress как это остановит УДАЛИТЬ и забой основные функции.

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

document.getElementById('datePiccc').oncut = function(e){ 
    e.preventDefault(); 
} 
document.getElementById('datePiccc').onpaste = function(e){ 
    e.preventDefault(); 
} 

Я думаю, что они должны работать во всех браузерах. В настоящее время тестируются в Chrome 31, Opera 15, IE10 и FireFox 24. (Примечание. В IE10 есть отметка x, которая появляется в правой части поля ввода, которая при нажатии очищает все значение поля. Не удалось найти способ это.)

Answer 2

Я предполагаю, что текстовое поле устанавливается в javascript. Если да, то вы можете использовать следующую строку disable поля:

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

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

Answer 3

Отключить вход в JQuery, как

$("#datePiccc").attr("disabled", true); 

И в чистом JS

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

Может быть, это может помочь!