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

Posted 2023-03-05

【中文标题】输入类型日期的占位符（仅当未输入值时）

【英文标题】：Placeholder for input type date (only when no value entered)

【发布时间】：2021-02-03 22:25:25

【问题描述】：

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

我想要的： 如果该值尚未输入，或者它保持默认值（如 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*">

【参考方案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*">

【讨论】：

是的，我很高兴！

不要忘记将答案标记为正确。除此之外，如果您需要任何解释，请告诉我。快乐编码:)