Как установить единственно возможные значения во входном тексте

Question

У меня есть форма ввода текста, в которой требуется вставить значение от 1 до 10.

Я попытался установить маску, чтобы настроить ее, но она заставляет меня записывать значения более 10, как мне установитьдопустимы только значения от 1 до 10 и не менее или более?

Форма тип ввода = "текст" имя = "уровень" id = "уровень"

Маска, которую я использовал, чтобы она принимала только цифры и чтобы она была длиной в 2 цифры

function maskFormatterForLvl(val) {
$(val).mask("ZZ", {
    translation: {
        'Z': {
            pattern: /[0-9]/,
            optional: true
        }
    }
});

};

Я пробовал с атрибутом "max", ноэто не сработало, возможно потому что я новичок в JavaScript

Answer 1

Вы можете использовать это регулярное выражение, если вам нужно использовать type="text"

<input type="text" pattern="([0-9])|(10)">

Answer 2

Вы можете использовать текстовый ввод и разрешать ввод только цифр с использованием charCode.От 48 до 57 - номера клавиатуры от 0 до 9.

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

Для минимального значения пользовательне может ввести что-то ниже 0, потому что для этого он должен иметь возможность написать -, что не соответствует первому условию (только цифры)

const input = document.getElementById('level')
input.onkeypress =  function(e) {
    var ev = e || window.event;
    if (ev.charCode < 48 || ev.charCode > 57) {
      return false;
    } else if (this.value * 10 + ev.charCode - 48 > this.max) {

      return false;
      } else if (this.value * 10 + ev.charCode - 48 < this.min) {

      return false;
    } else {
      return true;
    }
  }

<input type="text" name="level" id="level" min="1" max="10" maxlength="2">

Answer 3

Если значения вашего поля ввода являются числами, то вы можете использовать тип ввода «число».Атрибуты min и max представляют диапазон номеров для ввода.Надеюсь, это намного проще.

<input type="number" min="0" max="10">

ОБНОВЛЕНИЕ

Чтобы скрыть стрелки, вы можете использовать следующее.

/* Webkit browsers like Safari and Chrome */
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0; 
    }
/* For Firefox */
    input[type='number'] {
       -moz-appearance:textfield;
    }