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

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

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

Placeholder for input type date (only when no value entered)

html

jquery

date

input

placeholder