728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>무한 슬라이드</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" placeholder="숫자만 입력해주세요!">
<script src="app.js"></script>
</body>
</html>body{
margin: 0;
padding: 100px;
text-align: center;
}
input{
width: 20rem;
height: 5rem;
outline: none;
border: none;
border-bottom: 2px solid #eee;
font-size: 2rem;
color: #ccc;
}
input::placeholder{
font-size: 2rem;
}const input = document.querySelector('input')
input.addEventListener('keyup', function(e){
if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
// 0-9 only
console.log('숫자입니다')
}else{
console.log('숫자가 아닙니다.')
console.log(this.value.slice(0, this.value.length-1))
this.value = this.value.split('').filter(c => {
console.log(parseInt(c) == c)
return parseInt(c) == c
}).join('')
console.log(this.value)
}
})숫자가 아닌 경우 입력창 글자를 하나씩 가져와서 parseInt 로 변경한다. 숫자인 경우에는 자료형은 다르지만 값은 같기 때문에 == 연산자를 사용하면 만족한다. 하지만 숫자가 아닌 글자는 parseInt 로 변경한 값이 NaN(Not a Number)가 되기 때문에 원래 값이랑 다르다. 그러므로 숫자만 걸러진다.
728x90
'프론트엔드 > 컴포넌트' 카테고리의 다른 글
| 위로 증가하는 바 그래프 (0) | 2024.02.16 |
|---|---|
| 돋보기 효과 (0) | 2024.02.14 |
| 말풍선 툴팁 & 드롭다운 메뉴 만들기 (0) | 2023.07.29 |
| 부드러운 가로 스크롤링 (3) - ease 함수 사용 (0) | 2023.07.06 |
| 로딩 애니메이션 (0) | 2023.07.05 |