input 창에 숫자만 입력하기 > 기술자료

본문 바로가기
사이트 내 전체검색

기술자료

JavaScript input 창에 숫자만 입력하기

페이지 정보

댓글 0건 조회 328회 작성일 2019-10-02 22:05 ~ 2019-10-04 16:13

본문

input 입력창에 숫자만 입력되도록 하는 방법입니다.

샘플 : https://www.happyjung.com/demo/css/onlynumber.html


[ 방법.1 ]
숫자이외의 값이 들어오면 등록이 안됩니다.
정상 입력된 숫자는 유지가 됩니다.

<script type="text/javascript">
function onlyNumber(event){
    event = event || window.event;
    var keyID = (event.which) ? event.which : event.keyCode;
    if ( (keyID >= 48 && keyID <= 57) || (keyID >= 96 && keyID <= 105) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 ) 
        return;
    else
        return false;
}
function removeChar(event) {
    event = event || window.event;
    var keyID = (event.which) ? event.which : event.keyCode;
    if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 ) 
        return;
    else
        event.target.value = event.target.value.replace(/[^0-9]/g, "");
}
</script>


<input type="number" pattern="[0-9]*" placeholder="숫자만 입력"  onkeydown="return onlyNumber(event)" onkeyup="removeChar(event)" style="ime-mode:disabled;">



[ 방법.2 ]
숫자 이외의 것이 입력되면 input 창이 리셋 됩니다.

<script>
function onlyNumber(obj) {
    obj.value = obj.value.replace(/\D/g, '');
}
</script>

<input type="number" pattern="[0-9]*" onkeyup="onlyNumber(this)" style="ime-mode:disabled;">



참고자료
http://webskills.kr/archives/310
https://sir.kr/qa/281594?
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 2,360건 1 페이지

기술자료 목록
제목
2360 HTML   11  2019-12-16 12:13 ~ 2019-12-16 12:46  
2359 Linux   30  2019-12-13 21:28  
2358 그누보드   42  2019-12-10 21:41 ~ 2019-12-10 22:07  
2357 그누보드   231  2019-11-08 13:38 ~ 2019-11-15 11:33  
2356 PHP   197  2019-10-28 10:05  
2355 HTML   222  2019-10-25 18:48 ~ 2019-10-25 18:49  
2354 그누보드   281  2019-10-16 02:05 ~ 2019-10-16 02:52  
열람중 JavaScript   329  2019-10-02 22:05 ~ 2019-10-04 16:13  
2352 PHP   337  2019-10-02 16:52 ~ 2019-10-02 16:52  
2351 Linux   265  2019-10-02 16:42 ~ 2019-10-02 16:49  
2350 그누보드   296  2019-09-30 20:00  
2349 Linux   281  2019-09-30 18:06  
2348 HTML   273  2019-09-27 14:07 ~ 2019-09-27 14:08  
2347 PHP   307  2019-09-27 10:14 ~ 2019-09-27 10:52  
2346 영카트   210  2019-09-27 09:25  
2345 PHP   382  2019-09-24 00:41 ~ 2019-09-24 00:42  
2344 Linux   231  2019-09-23 23:03  
2343 그누보드   224  2019-09-23 08:32  
2342 Secure   182  2019-09-19 22:17  
2341 제로보드   254  2019-09-17 14:13 ~ 2019-09-17 14:21  

게시물 검색
계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
2,044
어제
1,254
최대
4,574
전체
5,254,317

회사명: 해피정닷컴   대표: 정창용   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 032-679-3528
부천센터: 14526 경기도 부천시 옥산로168번길 34-1, 3층   서울센터: 08393 서울시 구로구 디지털로32가길 16, 1206-280호
개인정보보호책임자: 정창용   통신판매업신고: 2014-서울구로-0074 [사업자등록확인]   건강기능식품영업신고 제2018-0080452호
Copyright 2001~2019 해피정닷컴. All Rights Reserved.