자바스크립트의 숫자만을 허용하기위한 다양한 방법을 알아 볼려고 합니다.
하나씩 예제를 작성하고 테스트 이후 올려야 하기 때문에 꾸준히 업로드 하겠습니다
그리고 시각효과등의 부수 적인 내용이 포함 될 수 있으나 해당 부분은 필터링 이후
사용 하시면 될 것 같아요!
1. INPUT 속성의 onchange 이벤트 이용
onchange의 경우 포커스(focus)를 완전히 읽을때 동작을 하게 됩니다
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>숫자만 | onchange</title> </head> <body> <form> <input type="text" name="scale_min" size="10" maxlength="10" class="form_font" value="" onchange=" if(isNaN(Number(this.value)) || (this.value.trim().length > 0 && this.value.charAt(this.value.length) == '.')) { // ▲▲▲▲▲ 숫자만 구문 ▲▲▲▲▲
alert('숫자정보를 기입해주세요'); var ipt = this; var borderColor = ipt.style.borderColor; var borderWidth = ipt.style.borderWidth;
// INPUT의 boder을 깜빡이는 효과를 주기 위함 var s1_cnt = 0; var s1 = setInterval(function(){ ipt.style.borderColor = 'red'; ipt.style.borderWidth = '2px'; s1_cnt++; var s2 = setInterval(function(){ ipt.style.borderColor = borderColor; ipt.style.borderWidth = borderWidth; clearInterval(s2);
// 최대 5회까지 깜빡인 이후 종료 if(s1_cnt == 5) { clearInterval(s1); ipt.value = ''; ipt.focus(); } }, 200); }, 400); } " /> <input type="text" name="scale_max" size="10" maxlength="10" class="form_font" value=""> </form> </body> </html>
'촌놈 - 취미로하는개발 > 웹' 카테고리의 다른 글
| [Tomcat] 톰캣 자원 모니터링 - JMX (0) | 2018.11.16 |
|---|---|
| JSP Oracle JDBC 데이터베이스 연결 예제 (3) | 2018.11.02 |
| [Javascript] 자바스크립트 LPAD, RPAD 좌우를 특정문자로 채우기 (0) | 2018.10.19 |
| [Javascript] html2canvas, FileSaver 을 활용한 웹화면 캡처 (0) | 2018.10.12 |
| [서블릿] HttpServletRequest 이용 모바일,타블릿,PC 구분 (0) | 2018.10.12 |
촌놈 개발자 일기
개발자로서 살아가는 느낌과 정보를 공유 합니다