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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body onload="checkCookies()"> <!-- 맨처음 시작할때 하고싶은 동작 --> <!-- onclick, onload, onChange --> <!-- onload --> <p id="demo"></p> <script type="text/javascript"> function checkCookies() { var text = "onload 실행"; document.getElementById("demo").innerHTML = text; } </script> <!-- onblur : 포커스가 이동했을 때 처리--> <form action="#"> 나이:<input type="text" onblur="isRegiNum(this)" size = "3" maxlength = "3">세<br> 숫자가 아닌 문자로 입력하면, 포커스를 잃을 때 경고가 표시됩니다. </form> <script type="text/javascript"> function isRegiNum( obj ) { var str = obj.value; /* 숫자가 아닌 뭇자열이 포함된 경우 */ if(str.match(/[^0-9]/g)){ //숫자가 아닌 다른 문자를 걸러내는 조건 알파벳이나 다른 문자들도 가능하다. ex) /[^a-z]/g, /[^a-z||A-Z]/g alert("숫자이외의 문자가 포함되어 있습니다."); obj.value = ""; return false; } } </script> <!-- onChange --> <form> 우편 번호 입력란 T: <input type="text" size="5" maxlength="3" onchange="isPostNum(this)"> - <input type="text" size="4" maxlength="3" onchange="isPostNum(this)"> <br> </form> <script type="text/javascript"> function isPostNum( obj ) { var str = obj.value; if(str.match(/[^0-9]/g)){ alert(str.match(/[^0-9]/g) + "\n\n숫자가 아닌 문자가 포함되어 있습니다."); obj.value=""; return false; } } </script> <!-- onkeydown --> <form> <p>입력:<input type="text" onkeydown="func(this.form)" onkeyup="func(this.form)" name="txt" size="40"> </p> <p>확인:<input type="text" readonly="readonly" name="copy" size="40" style="background-color: #eee; border: 1 px solid #ccc;"> </p> </form> <script type="text/javascript"> function func( frmObj ) { //alert( frmObj.txt.value ); //alert( frmObj.elements["txt"].value ); frmObj.copy.value = frmObj.txt.value; } </script> <!-- onkeydown --> <form action="#"> <input type="text" name="title"> </form> <script type="text/javascript"> //옛날 방식 /* document.getElementsByName("title")[0].onkeydown -- ASCII코드값(모두 대문자)*/ document.getElementsByName("title")[0].onkeypress = function(event){ //대 소문자 구분 가능 console.log('keydown - keycode :' + event.keyCode ); console.log('keydown - which :' + event.which ); } </script> <!-- onmousedown onmouseup --> <form action="#"> <p> 이미지 버튼을 마우스로 클릭하면, onmousedown 버튼을 떼면, onmouseup이벤트 발생 </p> <p> <input type="image" src="san0.gif" onmousedown="fMouseDown(this)" onmouseup="fMouseUp(this)"> </p> </form> <script type="text/javascript"> function fMouseDown( obj ) { obj.src = "san1.gif"; } function fMouseUp( obj ) { obj.src = "san0.gif"; } </script> <!-- onmouseover onmouseout --> <form action="#"> <input type="image" src="./san0.gif" onmouseover="m_over(this)" onmousedown="m_down(this)" onmouseout="m_out(this)"> </form> <script type="text/javascript"> function m_over(obj) { obj.src="./san2.gif"; } function m_down(obj) { obj.src="./san1.gif"; } function m_out(obj) { obj.src="./san0.gif"; } </script> </body> </html> | cs |
※Point
소스를 보면 '/[^0-9]/g'라는 문구를 볼 수 있는데
해석하면 0~9의 숫자가 아니면이라고 해석된다.
위의 문구를 응용해서 /[^a-z]/g 라던지
숫자 이외의 문자들도 응용이 가능하다.
문자 필터링이 간결해지는 명령어니 기억해 둘 것.
'IT Study > Web' 카테고리의 다른 글
| [JavaScript] Node 응용 예제 (0) | 2018.08.06 |
|---|---|
| [JavaScript] 기본 문법 - Node관련 예제 (0) | 2018.08.06 |
| [JavaScript] 응용 예제 - onmosueover, onmouseout (0) | 2018.08.06 |
| [JavaScript] 응용 예제 - Math.random 응용 (0) | 2018.08.06 |
| [JavaScript] 응용 예제 - select 링크 (0) | 2018.08.06 |