검색 버튼을 누르면 키워드 검색을 하는 부분이다.
onkeydown을 이용하여 Enter키를 누름과 동시에 이벤트가 발생되도록 작성했다.
* onkeydown : 키를 누르는 즉시 발생하는 이벤트를 설계하는 용도이다.
|
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 |
<html>
<head>
<script type="text/javascript">
// 검색 기능
function searchCheck(form) {
if (form.keyword.value == "") {
alert("검색할 단어를 입력하세요.");
form.keyword.focus();
return;
}
// form.action으로 url 주소를 추가하는 방식으로 더함
form.action += "personServlet.do";
form.action += "?keyfield=" + form.keyfield.value;
form.action += "&compare=" + document.querySelector("input[name = 'compare']:checked").value;
form.action += "&keyword=" + form.keyword.value;
form.submit();
}
</script>
</head>
<body>
<table>
<tr>
<td>
<form method="post" name="search">
<!-- onkeydown 이벤트 : 키보드 키를 누르는 즉시 발생하는 이벤트. -->
<!-- event.keyCode == 13 : Enter 키의 코드가 13번임. 즉 Enter키를 누르면 발생하는 이벤트 함수. -->
<input type="text" name="keyword" value="${cri.keyword}"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()" />
<!-- 검색 기능을 하는 searchCheck function으로 이동-->
<input type="button" id="btnSearch" value="검색" onclick="searchCheck(form)" />
</form>
</td>
</tr>
</table>
</body>
</html> |
cs |
'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글
| JavaScript :: text type 내 숫자만 입력 가능하게 하는 예제 (0) | 2016.05.10 |
|---|---|
| JavaScript :: getElementById() vs querySelector() 차이 (0) | 2016.05.05 |
| jQuery :: datepicker (0) | 2016.04.28 |
| JavaScript :: typeof (0) | 2016.03.15 |
| JavaScript :: 함수 (0) | 2016.03.15 |