IT Study/Web

[JavaScript] 기본 문법 - key이벤트, mouse이벤트, onBlur

도뿌리 2018. 8. 6. 14:58
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 라던지

숫자 이외의 문자들도 응용이 가능하다.

문자 필터링이 간결해지는 명령어니 기억해 둘 것.



저작자표시 비영리 동일조건