输入类型日期的占位符(仅当未输入值时)

Question

我正在尝试为输入类型日期设置一个占位符。

我想要什么：如果该值尚未输入，或者保持默认值(如dd/mm/yyyy(，则会显示占位符。如果插入了日期，则不会显示占位符。

我所拥有的：占位符只在关注元素之前显示，之后它就会永远消失，即使在日期选择器中没有键入任何值。

$( ".dateInput" ).focus(function() {
if ( $(this).attr('value') != '' ) {
$(this).attr("placeholder", "");
$(this).css('text-align', 'left');
console.log('no place');
} else {
$(this).attr("placeholder", "Date of Birth*");
$(this).css('text-align', 'right');
console.log('place');
}
});

.loanInput {
width: 400px;
border: 3px solid #008e39;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 20px;
border-radius: 8px;
padding: 5px 10px;
margin-top: 20px;
}
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: #999;
content: attr(placeholder) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" class="loanInput dateInput" required placeholder="Date of Birth*">

Answer 1

您可以使用change事件来代替focus。通过使用change，只有在输入日期有效时才会发生更改：(

$( ".dateInput" ).change(function() {
if ( $(this).attr('value') != '' ) {
$(this).attr("placeholder", "").css('text-align', 'left');
console.log('no place');
} else {
$(this).attr("placeholder", "Date of Birth*").css('text-align', 'right');
console.log('place');
}
});

.loanInput {
width: 400px;
border: 3px solid #008e39;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 20px;
border-radius: 8px;
padding: 5px 10px;
margin-top: 20px;
}
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: #999;
content: attr(placeholder) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" class="loanInput dateInput" required placeholder="Date of Birth*">