如何解决输入类型日期的占位符仅当未输入任何值时
我正在尝试为输入类型日期设置一个占位符。
我想要什么: 如果尚未输入该值,或仍为默认值(如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*">
解决方法
您可以做的是使用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*">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。