date type inptu에 placeholder를 넣고싶다는 생각이 들었다.
그런데 찾아보니까 내가 원하는대로 동작하는 코드는 딱히 없었다.
그래서 직접 작성했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.date_empty:before {
content: attr(data-placeholder);
width: calc(100% - 42px);
}
</style>
</head>
<body>
<input
type="date"
class="date_empty placeholder-date"
style="width: 200px"
data-placeholder="날짜 입력"
/>
<script>
$("input[type=date].placeholder-date").on("change", (e) => {
const target = $(e.target);
if (target.val() == "") target.addClass("date_empty");
else target.removeClass("date_empty");
});
</script>
</body>
</html>
.date_empty:before에서 calc를 사용할 때 %를 사용해서인지 너비가 계속 변하여서
input의 width를 200px로 고정시켜주니 괜찮아졌다.
또한 42px을 빼주는 이유는 맨 끝에 있는 아이콘의 공간을 남겨주기 위한 것이다.
이건.... 그냥 직접 해보면 42px을 빼주는 게 딱 알맞다는 것을 깨닫게 된다.
동작은 다음 링크에서 확인해볼 수 있다!
https://jsfiddle.net/rinkokomong/p5o4u1vj/3/
더 좋은 방법이 있으면, 공유해주세요!!!
'Tip' 카테고리의 다른 글
| h2 db tcp 접속 에러 (0) | 2022.01.27 |
|---|---|
| css로 글자길이에 따라 글자 생략하기 (0) | 2022.01.27 |
| VSCode REST Client (0) | 2021.11.11 |
| git에 access token과 함께 push하기 (0) | 2021.09.10 |
| Ajax 게시판과 뒤로 가기 (0) | 2021.03.12 |
