Остановка <select> от перехода к нажатию букв
<select size = "5">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
</select>
Естественно, когда я нажимаю a, b, c, d или e, происходит переход к варианту с этой первой буквой. Мне нужно отключить это, желательно не через Javascript (не обязательно).
Неужели нет возможности отключить эту опцию перехода к букве при нажатии клавиш?
Спасибо!
Как это будет работать с Javascript?
Добавить обработчик keydown и запретить действие по умолчанию, если ключ - это буква? Извините, у меня нет времени написать ответ, но это то, что приходит в голову.
Я не могу придумать веских причин, чтобы запретить пользователю использовать элемент выбора с клавиатурой. Какую проблему вы пытаетесь решить?
Ответы 4
Вы не можете этого сделать без JavaScript.
С помощью JavaScript вам нужно будет добавить обработчик событий для события keypress, чтобы предотвратить поведение по умолчанию и остановить распространение.
С jQuery:
$("select").on("keypress", function (event) {
event.preventDefault();
event.stopPropagation();
});
Позаботьтесь о том, чтобы $("select") выбрал все выбранные вами входы, и вы в конечном итоге добавите этот keypress для всех из них.
Без jQuery:
<select id = "mySelect" size = "5">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
</select>
var select = document.getElementById('mySelect');
select.addEventListener ("keypress", function (event) {
event.preventDefault();
event.stopPropagation();
});
Рабочая рабочий пример: https://jsfiddle.net/ep3xfyc8/9/
Позднее редактирование: существует решение для достижения этой цели без JavaScript. См. Ответ Ли Ковальковски ниже.
Спасибо! В итоге я использовал JS для этого. Решение @ LeeKowalkowski было довольно изящным, но не работало для моего конкретного приложения.
Источник: https://stackoverflow.com/a/1227324/9505307
голос против принял
Кто-то оставил мне правильный ответ, а потом по какой-то причине удалил его, вот и он:
<script type = "text/javascript">
function IgnoreAlpha(e)
{
if (!e)
{
e = window.event ;
}
if (e.keyCode >= 65 && e.keyCode <= 90) // A to Z
{
e.returnValue=false;
e.cancel = true;
}
}
</script>
<body>
<p>
<select id = "MySelect" name = "MySelect" onkeydown = "IgnoreAlpha(event);"">
<option selected = "selected" value = "" />
<option value = "A">A</option>
<option value = "B">B</option>
<option value = "C">C</option>
</select>
</p>
</body>
Из любопытства ... зачем тебе это нужно?
Это адаптация того, что предлагает @ razvan-dimitru, но при этом JS сводится к минимуму. В каком-то смысле вам нужна только разметка для этого решения:
<select onkeyup='event.preventDefault(); event.stopPropagation();'>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
</select>Я не думаю, что отмена события нажатия клавиши отменит событие нажатия клавиши. Я все еще могу использовать клавиатуру, чтобы изменить это значение выбора.
Также это отключает все события клавиатуры, которые нужно использовать в моем случае использования. Однако, спасибо!
Вы может делаете это без JavaScript.
Префикс каждой опции с помощью символа Без стыковки с нулевой шириной.
<label for = "select">Select:</label>
<select size = "5" id = "select">
<option>‌a</option>
<option>‌b</option>
<option>‌c</option>
<option>‌d</option>
<option>‌e</option>
</select>Если это будет отправлено в HTTP-запросе, символ ‌ должен игнорироваться браузером. В любом случае каждая опция должна иметь свой собственный атрибут value для целей отправки формы, и вам не нужно будет помещать символ ‌ в значения опции.
Отлично! Никогда раньше такого не видел.
Не без JavaScript, нет. Я думаю, он встроен в элемент управления на уровне ОС.