输入类型日期的占位符（仅当未输入值时）

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*">