Поле для целых чисел от min до max

Question

Описание

Пытаюсь делать так чтобы пользователь БУКВАЛЬНО не смог вводить ничего кроме целого числа от min до max. Допустим min - 10, max - 50.
Мой вариант решения выглядит таким:

class Board
{
  static minWidthCells = 10;
  static maxWidthCells = 50;
  static widthCells = 25;
}

document.getElementById("input_width").value = Board.widthCells;

document.getElementById("input_width").addEventListener
("input",
  function(event)
  {
    event.target.value = event.target.value.replace(/[^0-9]/g, "");
    event.target.value = Math.max(Board.minWidthCells, event.target.value);
    event.target.value = Math.min(Board.maxWidthCells, event.target.value);
  }
);

.input
{
  width: fit-content;
  height: fit-content;
  margin: auto 2.5px;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  font-family: monospace;
  font-weight: bold;
  background-color: rgb(225, 225, 225);
  border: 1px solid rgb(200, 200, 200);
  border-radius: 5px;
  cursor: pointer;
  caret-color: rgb(50, 50, 50);
  color: rgb(50, 50, 50);
  user-select: none;
  outline: none;
}

.input:hover
{
  filter: invert(0.1);
}

td
{
  padding: 3px;
}

<table>
  <tr>
    <td>
      <p>
        Ширина
      </p>
    </td>
    <td>
      <input type="number" class="input" id="input_width">
    </td>
  </tr>
</table>

Главная проблема там в том что изменить значение можно только с помощью стрелок.

Вопрос

Так вот хочу узнать - как подправить моё решение, чтобы можно было нормально вводить? Потому что в моём решении если ввод больше 50, ставит 50, если ниже 10, ставит 10.
Или может подскажите более хорошее решение?

Answer 1

Вам нужно валидировать то что ввел пользователь, например, по нажатию кнопки или событию типа keyUp:

const handleKeyUp = event => {
   const value = event.target.value
   // ваша логика валидации ...
   // if (value >= 10 && value <= 50) {
   // } else {
   // }
}

document.querySelector("input_width").addEventListener("keyup", handleKeyUp, false)

Answer 2

Попробуйте <input type="number" min="10" max="50"> Через атрибуты можно задать минимальное и максимальное значение.

БЛОГ НА HUSL

Поле для целых чисел от min до max

Описание

Вопрос

Ответы (2 шт):