자동으로 하이픈 Hyphen( - ) 입력하기
2019. 12. 6. 16:09ㆍPROGRAMMING/JavaScript & JQuery
|
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
|
<html>
<head>
<script>
$(function(){
$('#startDate').keydown( function(){ autoHyphen(event,this) });
});
function autoHyphen(event, obj) {
var key = event.charCode || event.keyCode || 0;
$text = $(obj);
if (key !== 8 && key !== 9) {
if ($text.val().length === 4) {
$text.val($text.val() + '-');
}
if ($text.val().length === 7) {
$text.val($text.val() + '-');
}
}
}
</script>
</head>
<body>
<input type="text" class="dateText" id="startDate" name="startDate" maxlength="10"/>
</body>
</html>
|
저는 테스트 스크립트로 생년월일을 입력할 때 자동으로 하이픈( - )이 입력되도록 짜봤습니다.
keydown 이벤트 같은 경우 키보드가 눌러질때마다 event 매개변수에 키 코드 값을 받아서 처리합니다.
아래의 표는 Key와 event코드를 정리해 놓은 것 입니다.
| Key | Code | Key | Code | Key | Code |
| 백스페이스(←) | 8 | e | 69 | 숫자패드 8 | 104 |
| 탭(TAB) | 9 | f | 70 | 숫자패드 9 | 105 |
| 엔터(Enter) | 13 | g | 71 | 숫자패드곱하기(*) | 106 |
| 쉬프트(SHIFT) | 16 | h | 72 | 숫자패드더하기(+) | 107 |
| 컨트롤(CTRL) | 17 | i | 73 | 숫자패드빼기(-) | 109 |
| 알트(ALT) | 18 | j | 74 | 숫자패드소수점(.) | 110 |
| Pause/Break | 19 | k | 75 | 숫자패드나누기(/) | 111 |
| 대소문자(CapsLock) | 20 | l | 76 | F1 | 112 |
| ESC | 27 | m | 77 | F2 | 113 |
| Page Up | 33 | n | 78 | F3 | 114 |
| Page Down | 34 | o | 79 | F4 | 115 |
| End | 35 | p | 80 | F5 | 116 |
| home | 36 | q | 81 | F6 | 117 |
| 방향키(←) | 37 | r | 82 | F7 | 118 |
| 방향키(↑) | 38 | s | 83 | F8 | 119 |
| 방향키(→) | 39 | t | 84 | F9 | 120 |
| 방향키(↓) | 40 | u | 85 | F10 | 121 |
| Insert | 45 | v | 86 | F11 | 122 |
| Delete | 46 | w | 87 | F12 | 123 |
| 0 | 48 | x | 88 | Num Lock | 144 |
| 1 | 49 | y | 89 | Scroll Lock | 145 |
| 2 | 50 | z | 90 | 세미콜론(;) | 186 |
| 3 | 51 | 왼쪽 윈도우키 | 91 | = | 187 |
| 4 | 52 | 오른쪽 윈도우키 | 92 | , | 188 |
| 5 | 53 | 컨텍스트 메뉴 | 93 | - | 189 |
| 6 | 54 | 숫자패드 0 | 96 | 마침표(.) | 190 |
| 7 | 55 | 숫자패드 1 | 97 | / | 191 |
| 8 | 56 | 숫자패드 2 | 98 | 역따옴표(`) | 192 |
| 9 | 57 | 숫자패드 3 | 99 | 브라켓열기([) | 219 |
| a | 65 | 숫자패드 4 | 100 | 백슬래시(\) | 220 |
| b | 66 | 숫자패드 5 | 101 | 브라켓닫기(]) | 221 |
| c | 67 | 숫자패드 6 | 102 | 따옴표(') | 222 |
| d | 68 | 숫자패드 7 | 103 |
테스트 해보세요!!
'PROGRAMMING > JavaScript & JQuery' 카테고리의 다른 글
| JQuery 사용하기 (0) | 2019.12.06 |
|---|---|
| datepicker 사용하기 (0) | 2019.12.05 |
| 문자수를 지정하여 다음칸으로 이동시키기 (autoTab) (0) | 2019.12.05 |
| HTML태그 추가/삭제(append, prepend, after, before,remove) (0) | 2019.09.05 |