Как заставить пользователя ставить только цифры

Question

Я хочу, чтобы пользователь мог использовать ввод только для чисел. Я пробовал несколько вещей, таких как oninput="this.value = this.value.replace(/[^0-9.]/g, '') и многое другое, но, например, код, который я отправил, если я наберу письмо и продолжаю нажимать букву на клавиатуре.это ни к чему не приведет, мне нужен код, который на 100% заставит пользователя печатать только цифры, независимо от того, что произойдет.если бы я мог поместить число в поле ввода, которое пользователь не может удалить, например, 0, было бы хорошо.

Answer 1

      $("#but").click(function(){
        let inp_val = $("#txt").val();
        if(isNaN(inp_val)){
          alert("Just enter a number.");
          $("#txt").val("");
        }
      })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">
<input type="button" value="CLICK" id="but">

Answer 2

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

Также, если я вас правильно понимаю, чтобы добавить значение по умолчанию «0», просто определите его непосредственно во вводе как value="0", или вы можете использовать placeholder="0", если это то, что вы ищете.

<input type="number" value="0" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" />

Answer 3

Хотя это не приведет к принудительному вводу пользователем только цифр, вы можете рассмотреть возможность использования атрибута pattern для использования некоторого встроенного поведения.Если вы введете нечисловые символы, цвет текста станет красным:

input:invalid {
  color: red;
}

<input type="text" pattern="[0-9]+"/>

Тогда мы можем начать смотреть на API проверки ограничений :

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

Если вы набираете нечисловые символы и пытаетесь отправить форму, вы должны увидеть встроенную подсказку, отображающуюПользовательское сообщение об ошибке:

const input = document.querySelector('input');

input.addEventListener('invalid', () => {
  if (input.validity.patternMismatch) {
    input.setCustomValidity('Numbers only please!!');
  }
});

input:invalid {
  color: red;
}

<form>
  <input type="text" pattern="[0-9]+"/>
  <button type="submit">submit</button>
</form>

Answer 4

Вы можете использовать <input type=...>, как указано во входной спецификации .