TransWikia.com

Проверить и ограничить ввод от min до max JS

Stack Overflow на русском Asked on November 10, 2021

Описание

Пытаюсь сделать так чтобы пользователь БУКВАЛЬНО не смог вводить ничего кроме целого числа от 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.

Или может подскажите более хорошее решение?

2 Answers

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

Answered by Marat Isaev on November 10, 2021

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

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

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

Answered by Vasily on November 10, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP