input 태그에 type 설정을 'number' 로 하지 않고 'text' 인 상태에서
간략하게 숫자만 입력받고 싶은 경우에
다음과 같이 자바스크립트 함수로 만들어 두고
function onlyNumber(obj){
obj.value = obj.value.replace(/[^0-9]/g, "");
}
input 태그에 'oninput' 속성(input 태그에 값이 입력될때 실행)에 함수 호출하여 제어
<input type="text" oninput="onlyNumber(this)">
* 주의사항
값이 입력이 될 때마다('oninput' 속성) 자바스크립트 함수로 값을 제어하는 방법이고,
intput 태그의 속성이 'text' 이면
근본적으로 숫자뿐만 아니라 문자 및 특수기호 등이 입력가능 하기 때문에
개발자도구 등을 이용하여 태그에 'value' 속성에
강제로 값을 삽입할 수 있으므로 반드시 원하는 형식으로만 값을 DB에 저장해야 한다면
서버 측에서 데이터를 한번 더 검증하는 로직을 추가하는게 좋습니다.
'JavaScript' 카테고리의 다른 글
JS 자바스크립트 이벤트 핸들러 중첩 제어 / .off() / 이벤트 핸들러 중복 제어 (0) | 2023.05.14 |
---|---|
JavaScript 자바스크립트 동적으로 생성된 태그에 클릭 이벤트 동작하지 않을 때 (jQuery 제이쿼리) (0) | 2023.02.26 |
JavaScript 자바스크립트 현재시간 오전 or 오후 00:00 형식으로 나타내기 (0) | 2023.01.21 |
JS / 제이쿼리 여러 체크박스(input 태그) 중 현재 체크된 체크박스 (input 태그) 값 가져오기 (0) | 2022.08.15 |
(백틱) JS ` JavaScript ` 자바스크립트 백틱 (0) | 2022.04.07 |
최근댓글