khsbory.github.io/clear_text.html at master · khsbory/khsbory.github.io · GitHub

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
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>
  검색어 삭제 접근성
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<!-- <link rel="stylesheet" href="styles.css" /> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>

  <h1>
    검색어 삭제 버튼을 구현하는 경우
  </h1>

  <div class="bad">
  <h2 id="notAccessible">접근성 미적용 예제</h2>

<label for="searchField1">검색어</label>
<input type="text" id="searchField1">
<button style="display: none;" type="button" id="btnDelete1">검색어 삭제</button>
  </div>

<div class="good">
  <h2 id="accessible">접근성 적용 예제</h2>
  <label for="searchField2">검색어</label>
  <input type="text" id="searchField2">
  <p>
    <button style="display: none;" type="button" id="btnDelete2">검색어 삭제</button>
  </p>
    </div>
</body>
<script>
  $(function(){
var searchField1 = $("#searchField1");
var searchField2 = $("#searchField2");
var btnDelete1 = $("#btnDelete1");
var btnDelete2 = $("#btnDelete2");

searchField1.keyup(function() {
check();
});

searchField1.change(function() {
check();
});
function check() {
  if (searchField1.val() != "") {
  btnDelete1.show();
} else {
  btnDelete1.hide();
};
};

function check2() {
  if (searchField2.val() != "") {
  btnDelete2.show();
} else {
  btnDelete2.hide();
};
};

  btnDelete1.on('click',function(){
    searchField1.val("");
    btnDelete1.hide();
    searchField1.focus();
      });

searchField2.keyup(function() {
check2();
});

searchField2.change(function() {
check2();
});

  btnDelete2.on('click',function(){
    searchField2.val("");
    btnDelete2.hide();
    searchField2.focus();
      });
});
</script>
</html>