HTML에서 숫자 입력만 허용

1. input 태그에서 type="number"를 사용하여 HTML에서 숫자 입력만 허용
2. HTML에서 숫자 입력만 허용하도록 JavaScript에서 클라이언트 측 유효성 검사 작성

이 기사에서는 HTML의 텍스트 입력 필드에 숫자 입력만 허용하는 몇 가지 방법을 소개합니다.

input 태그에서 type="number"를 사용하여 HTML에서 숫자 입력만 허용

HTML에서는 input 태그를 사용하여 사용자로부터 입력을 받습니다.

input 태그의 type 속성으로 입력 유형을 지정할 수 있습니다. input 태그는 텍스트, 숫자, 비밀번호, 이메일 등과 같은 다양한 입력 유형을 허용합니다.

type 속성을 사용하여 HTML에서 숫자 입력만 허용할 수 있습니다. 예를 들어 type 속성이 number인 input 태그를 생성합니다.

다음으로 제출 버튼을 만듭니다. 숫자가 아닌 문자를 입력하면 양식이 제출되지 않습니다.

그러나 동작은 브라우저마다 다릅니다.

Firefox에서 아래 예는 입력 영역에 모든 입력을 허용합니다. 그러나 버튼을 클릭할 때 값이 제출되지 않도록 합니다.

크롬의 경우 숫자가 아닌 다른 문자를 입력할 수 없습니다. Firefox에서는 다른 입력을 붙여넣을 수 있지만 Chrome에서는 허용하지 않습니다.

예를 들어 임의의 텍스트를 복사하여 Firefox의 입력 영역에 붙여넣으면 텍스트가 붙여넣어지지만 Chrome에서는 발생하지 않습니다. 이 동작은 내용을 텍스트 영역으로 끌어다 놓을 때도 동일합니다.

따라서 검증을 추가하기 위해 텍스트 영역에서 끌어서 놓기 및 붙여넣기 작업을 비활성화할 수 있습니다. 예를 들어 input 태그에 ondrop 및 onpaste 속성을 입력하고 return false를 값으로 입력합니다.

이렇게 하면 텍스트 영역에서 복사-붙여넣기 및 끌어서 놓기 기능이 비활성화됩니다.

예제 코드:

 <form action="">
 <input type="number" ondrop="return false;" onpaste="return false;" />
 <button type="submit" value="Submit">Click</button>
 </form>

HTML에서 숫자 입력만 허용하도록 JavaScript에서 클라이언트 측 유효성 검사 작성

위의 방법이 모든 브라우저에서 완벽하게 작동하는 것은 아니지만 텍스트 영역에 숫자 값만 입력할 수 있도록 일부 클라이언트 측 유효성 검사를 추가해야 합니다. 이를 위해 JavaScript를 작성해야 합니다.

0-9 값의 입력만 수락할 수 있는 경우 이러한 유효성 검사를 추가해야 합니다. 이를 위해 JavaScript에 onkeypress 이벤트가 있습니다.

onkeypress 이벤트는 사용자가 키를 누를 때 실행됩니다. onkeypress 이벤트에서 0-9 사이의 값만 반환할 수 있습니다.

charCode 속성을 사용하여 눌린 입력의 문자 코드를 가져올 수 있습니다.

예를 들어 onkeypress 이벤트를 input 태그의 속성으로 작성합니다.

속성 내에서 아래 예와 같이 && 연산자를 사용하여 event.charCode>=48 및 event.charCode<=57 문을 반환합니다. 그런 다음 input 태그 끝에 required 속성을 작성합니다.

아래 예에서 48과 57은 각각 0과 9의 유니코드 문자 코드입니다. JavaScript는 0-9의 값만 반환합니다.

이것이 charCode 속성과 함께 onkeypress 이벤트를 사용하여 HTML에서 숫자 입력만 허용하는 방법입니다.

예제 코드:

<form>
<input type="number" ondrop="return false;" onpaste="return false;"
onkeypress="return event.charCode>=48 && event.charCode<=57" required/>
<button type="submit" value="Submit">Click</button>
</form>