[jQuery] input에 숫자만 입력하기

input에 숫자만 입력되도록 설정하는 방법을 소개하겠습니다.

 

첫 번째 방법은 input type을 number로 지정하는 방법입니다.

<input type="number">

 

두 번째 방법은 text type일 때, ctrl+v나 마우스 우클릭하여 텍스트를 붙여 넣기 하더라도 숫자만 입력되도록 설정하는 방법입니다.

<input type="text" oninput="this.value = this.value.replaceAll(/\D/g, '')">

or

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

 

공통화하여 사용할 땐 아래처럼 설정합니다.

<input type="text" name="number1">
<input type="text" name="number2">

$(document).on("input", "[name=number1], [name=number2]", function() {
    this.value = this.value.replaceAll(/\D/g, "");
});

그런데 위 방법은 갤럭시 삼성 브라우저에서는 작동하지 않습니다. (삼성 브라우저가 문제가 많음) 이와 같은 이슈도 발생할 수 있으니 뒷단에서 방어 로직을 추가해야 합니다.