숫자만 입력 받도록 하는 자바스크립트 

//숫자만 입력 받도록 하는 함수 
function isNum(){ 
   var key = event.keyCode;

   if(!(key==8||key==9||key==13||key==46||key==144||(key>=48&&key<=57)||key==110||key==190)){ 
        alert('숫자만 입력 가능합니다'); 
        event.returnValue = false; 
   } 
}

 

 

 

<input type='text'........ onkeypress='isNum();'>

 

 위의 경우 영문 입력일 경우는 체크 하지만 한글 입력일 경우는 통과 하는 경우가 일어난다.

따라서   input 구문에 style='ime-mode:disabled' 를 적용 시키면 한글, 영문 모두를 막아 숫자만 입력 되도록 한다.


***

단, 크롬에선 한글입력이 된다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head>
<title>Using JSTL Functions</title>
</head>
<body>    
 
<c:set var="theString" value="I am a test String"/>    
 
<c:if test="${fn:contains(theString, 'test')}">       
    <p>Found test string<p>    
</c:if>    
 
<c:if test="${fn:contains(theString, 'TEST')}">       
    <p>Found TEST string<p>    
</c:if>
 
</body>
</html>
 
결과 Found test string
 
 
자바단에서,
if (str.indexOf(",") != -1) 이렇게 하면 되더군요 
if(str.contains(",")) 해도 될듯 하네요
 
 
 
cs



$("클래스명").append("추가할내용");

    -  클래스명 뒤에 추가할 내용을 삽입한다.

$("추가할내용").appendTo("클래스명");

    - 추가할 내용을 클래스명 뒤에 삽입한다.


*두 메서드의 예제는 W3Schools 의 예제를 사용하였습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* append */
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
         
        $("#btn1").click(function(){         //button btn1 클릭시.     
            $("p").append(" <b>Appended text</b>.");     // p태그 뒤에 <b>Appended text</b>.를 삽입함.
        });
  
        $("#btn2").click(function(){        // button btn2 클릭시.     
            $("ol").append("<li>Appended item</li>");   // ol 태그 뒤에 <li>Appended item</li>을 삽입함.   
        });
    });
</script>
 
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
 
/* appendTo */
 
<button id="btn1">Append text</button><button id="btn2">Append list item</button>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
 
    $(document).ready(function(){  
        $("button").click(function(){       // button을 클릭시    
            $("<span>Hello World!</span>").appendTo("p");  // p태그 뒤에 <span>Hello World!</span>를 삽입함.  
        });
    });
</script>
 
<button>Insert span element at the end of each p element</button>
 
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
cs

결과>



1
2
3
4
5
6
7
8
9
10
11
 
$("#dateBirth).keyup(function(event){
    if (!(event.keyCode >=37 && event.keyCode<=40)) 
    {
       var inputVal = $(this).val();
       $(this).val(inputVal.replace(/[^0-9]/gi,''));
    }
});
cs



다른방법


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
onkeyup="checkChar(this)"  ------>html테그에 이것넣고
 
// 숫자만 입력가능 함수(keyup)
function checkChar(obj){
    re  = /[a-zA-Zㄱ-ㅎㅏ-ㅣ가-힝]/;
    if(re.test(obj.value)){
        alert('숫자만 입력하여 주십시오.');
        obj.value = '';
        obj.focus();
    }
}
 

cs


또 다른방법


1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function onlyNumber() {
    if((event.keyCode<48)||(event.keyCode>57)) {
        event.returnValue=false;
    }
}
 
 
적용시 아래와 같이 사용하면 된당~
<input type="text" onkeypress='onlyNumber()'>
cs


*IE에서는 테스트하지 못했습니다.

+ Recent posts