반응형
[Html & CSS] input에 검색 시 정규식으로 영어랑 숫자만 입력 시키는 방법 !!
정규식 만드는김에 검색창 모양으로 만들어 봤습니다 :)
아래 주석에 따라 한글만 허용도 가능합니다 ㅎ
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body에 Flexbox 스타일 적용하여 화면 중앙에 위치시킴 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 화면 높이를 100%로 설정하여 창이 작을 때에도 중앙에 위치하도록 함 */
margin: 0;
}
/* 입력창 스타일 */
.search-container {
position: relative;
width: 300px;
}
input[type="text"] {
width: 80%;
padding: 12px 20px;
border: 2px solid #ccc;
border-radius: 25px;
font-size: 16px;
background-color: #f0f0f0;
}
/* 검색 아이콘 스타일 */
.search-icon {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
color: #999;
cursor: pointer;
}
</style>
</head>
<body>
<div class="search-container">
<input type="text" id="inputValue"/>
<span class="search-icon" onclick="checkReg()">🔍</span>
</div>
</body>
</html>
<script>
function checkReg() {
const value = document.getElementById('inputValue').value;
const regExp = /[^0-9a-zA-Z]/g; // 숫자와 영문자만 허용
// const regExp = /[^ㄱ-ㅎ|가-힣]/g; // 한글만 허용
if(regExp.test(value)) {
alert("영어와 숫자만 입력 가능합니다.");
return false;
} else {
alert("통과");
return true;
}
};
</script>결과값
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [Html & CSS] span 태그에 onclick 온클릭 이벤트 넣는 방법 !! (0) | 2023.11.08 |
|---|---|
| [HTML & CSS] html에서 "visibility:hidden" 과 "display:none" 에 대한 설명 및 차이점(+사용 예시) (0) | 2023.11.07 |
| [Html & CSS] 사이즈별 파비콘(favicon) 만드는 방법 !! (0) | 2023.07.25 |
| [Html & CSS] css를 활용하여 움직이는 효과 만드는 방법 !! (0) | 2023.07.24 |
| [Html & CSS] 사진 클릭하면서 넘기는 효과 주는 방법 !! (0) | 2023.07.22 |
댓글