Запретить изменение значений в числовом вводе клавишами со стрелками

У меня есть элемент управления вводом на веб-странице, похожей на это:

<input type="number" name="value" />

если этот элемент управления имеет фокус, и я нажимаю клавиши со стрелками вверх или вниз, то значение в текстовом поле увеличивается или уменьшается (кроме IE). Я хотел бы отключить эту функцию, желательно с помощью CSS. У меня уже есть кнопки spinner, удаленные с помощью CSS. Я понимаю, что могу использовать JavaScript для захвата события keydown, но я хочу, чтобы клавиши со стрелками продолжали прокручивать страницу вверх или вниз.

7
html input

4 ответов

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

Я бы предложил добавить прослушиватель событий к вашему входу, который не позволит клавишам со стрелками влиять на него без фактического предотвращения прокрутки страницы с входом не в фокусе:

document.getElementById('yourInputID').addEventListener('keydown', function(e) {
    if (e.which === 38 || e.which === 40) {
        e.preventDefault();
    }
});

Если вы хотите, чтобы клавиши со стрелками для прокрутки страницы случае, если вход в фокус, Я бы предложил использовать JQuery, который позволит вам писать меньше кода, и он будет поддерживать все браузеры.

9

вы можете использовать ниже код


HTML-код

<input type="number" min="1.01" max="1000" id="num"/>

в CSS 

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

JavaScript:

$(document).ready(function() {
$("input[type=number]").on("focus", function() {
    $(this).on("keydown", function(event) {
        if (event.keyCode === 38 || event.keyCode === 40) {
            event.preventDefault();
        }
     });
   });
});

вы можете найти рабочий пример здесь: http://jsfiddle.net/649d66bb/

1

Я знаю, что это не тот ответ, который вы хотите услышать, но это то, что вы действительно должны делать?

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

как пользователь, вкладка в поле и возможность использовать стрелки вверх и вниз для изменения значения-это ожидаемое поведение. Например, щелчок по логотипу приведет вас домой или нажатие Cmd / Ctrl + W закроет окно. Если что-то мешает этому, вы в конечном итоге будете отчуждать пользователя, и они потеряют веру в ваш интерфейс.

даже со стандартным type="text" box, стрелки вверх и вниз не прокручивают страницу, эта функциональность, похоже, идет против всего, что является стандартным.

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

-1

О, я просто смог сделать это с помощью прослушивателя keydown и следующего фильтра:

const invalid = ['e', ',', '.', 'ArrowUp', 'ArrowDown'];
if (invalid.find(e => $event.key === e)) {
  $event.preventDefault();
}

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

-3