Я хочу ограничить пользователя только возможностью изменять содержимое окна с помощью прядильщиков с типом ввода = "число" в HTML5 и не иметь возможности вводить что-либо в коробка
<input type="number" min="0" value="0" step="5"/>
Могу ли я это сделать?
(моя целевая аудитория будет использовать только Chrome, поэтому прядильщики, не появляющиеся в IE (9) и Firefox (13), не являются проблемой)
Здесь вы можете использовать событие Javascript onkeydown... Который не позволит пользователю вводить что-либо, и все же он сможет использовать элементы управления стрелками для увеличения и уменьшения чисел.
<input type="number" min="0" value="0" step="5" onkeydown="return false" />
Примечание. Просто не зависеть от JavaScript и HTML, всегда проверяйте на стороне сервера, чтобы убедиться, что пользователь не опубликовал никаких вредоносных данных. Javascript может быть отключен, и пользователь может злоупотреблять, добавив текст в текстовое поле, но другого способа остановить его не удастся, поэтому также проверяйте серверную проверку.
Как вы прокомментировали, что вам также нужно отключить выбор текста, чтобы пользователи не путались, вы также можете использовать методы позиционирования CSS здесь, так как вы сказали, что предназначенные пользователи имеют только Chrome, поэтому есть не так много проблем с перекрестным браузером, поэтому вы можете сделать что-то вроде этого...
Оберните элемент input элементом span, и только с помощью метода позиционирования CSS и :after pseudo мы наложим виртуальный элемент на input.
Теперь я сохранил схему только для демонстрационных целей, вы можете безопасно удалить их.
span {
position: relative;
outline: 1px solid #00f;
}
span:after {
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
outline: 1px solid red;
width: 91%;
}
Принятый ответ использует onkeydown, который также отключит счетчик; что хорошо задокументировано здесь: https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event
Вы можете использовать onkeypress, который предотвратит использование ключей charCode. Но MDN говорит, что нажатие клавиш находится на амортизации. Хотя это хорошо поддерживается, вам не советуют. https://caniuse.com/#search=keypress
Мое решение состоит в том, чтобы иметь свою собственную функцию для фильтрации по кодам клавиш и предотвращения ошибок по всем остальным кодам клавиш. Обратите внимание, что updateValue - это пользовательская функция. Чтобы позволить спиннеру выполнять свою работу, вы можете следовать встроенному методу в конце.
myInputTag = document.getElementsByTagName('input')[0];
myInputTag.onkeydown = onlyUpDownKeys ;
function onlyUpDownKeys(e) {
(e.keyCode===38 || e.keyCode===40) ? updateValue(e): e.preventDefault();
}
Это будет работать на всех раскладках клавиатуры. Узнайте о совместимости своих пользователей по адресу https://caniuse.com/#search=.keycode
Вы также можете вставить это в определение встроенного тега ввода по умолчанию в HTML следующим образом:
'<input class="tableCell" type="number" min=0 onkeydown = "!(e.keyCode===38 || e.keyCode===40) && e.preventDefault();">';