不显示输入类型 =“日期”字段的占位符答案

【问题标题】：Not showing placeholder for input type="date" field不显示输入类型 =“日期”字段的占位符
【发布时间】：2013-12-17 17:48:58
【问题描述】：

我正在做一个 phonegap 应用程序。当我尝试如下所示的type="date" 输入字段时，它会按照我的预期在 iPhone 中显示日期选择器，但它没有显示我给出的占位符。我在 SO 中发现了同样的问题，但在任何地方都没有解决方案。

 <input placeholder="Date" class="textbox-n" type="date" id="date">

【问题讨论】：

stackoverflow.com/a/23683687/1783439 为我工作
placeholder for input type date html5的可能重复

标签： html cordova datepicker placeholder

【解决方案1】：

根据the HTML standard：

以下内容属性不得指定且不适用于元素：accept、alt、checked、dirname、formaction、formenctype、formmethod、formnovalidate、formtarget、height、inputmode、maxlength、minlength、multiple、pattern、占位符、大小、src 和宽度。

【讨论】：

那么，我该怎么办？
@mvp，你不应该使用占位符属性，并把一个元素关联到 input[type=date]。
它应该看起来像一个占位符吗？
标签和占位符是两种不同的东西。我不明白你在这里的建议。
答案中的链接已失效，给出 "404 Not Found"。

【解决方案2】：

这可能不合适......但它帮助了我。

&lt;input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date"&gt;

【讨论】：

似乎是一个不错的功能，但是单击该字段会显示屏幕键盘而不是日期选择器。不错的尝试。
@MathijsSegers 您是否找到了不显示键盘的解决方案？我在这里尝试了这个解决方案，但在 iOS 6、7 和 8 中，显示键盘一段时间，然后显示日期选择器。
嗯，是的，很恶心。我在日期字段中添加了一个带有文本字段外观的跨度，使其仅在 ios 上可见。日期选择器的 z 索引高于跨度，但 css 中的 alpha 0.01。 Onclick 我会显示日期字段。它有效，但有点讨厌。
我注意到这在 iOS 设备上不起作用，有人有解决方案吗？
对于 cordova 应用，使用 onmouseenter 事件而不是 onfocus 事件，然后，日期选择器将在第一次点击时打开

【解决方案3】：

您可以使用“值”属性，例如：

<input type="date" value="Date" class="textbox-n" id="date"/>

【讨论】：

这是不正确的。该值的格式应为“YYYY-MM-dd”。否则，将不会显示该值并显示警告消息：指定的值“日期”不符合要求的格式，“yyyy-MM-dd”。

【解决方案4】：

如果您使用 mvp 的方法但添加 onblur 事件将其更改回文本字段，以便在输入字段失去焦点时再次出现占位符文本。它只是让黑客变得更好一点。

&lt;input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" /&gt;

希望这会有所帮助。

【讨论】：

谢谢！这对我来说非常有效！我是否可以建议禁用该字段，然后在单击时删除禁用？我在 Angular 中工作，并编写了一个范围函数来更改类型，并删除禁用，当它以某种方式专注于文本字段时，它将停止奇怪的错误
当占位符失焦时我可以看到它，但是要获得日期选择器，我需要单击它两次。我该如何解决？
日期格式随着日期/文本类型的变化而变化。而且，不适用于 iOS 设备。
现在是 2020 年，我们仍然需要为此使用 js...想知道这个 type="date" 占位符有什么问题，为什么它不像其他占位符...
我改进了 onblur 部分，只在值为空时切换回文本：onblur="if(this.value==''){this.type='text'}"

【解决方案5】：

我花了一些时间才弄清楚这个，留下type="text"，并添加onfocus="(this.type='date')"，如上所示。

我什至喜欢上面提到的 onBlur 想法

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">

希望这对没有完全了解上面发生的事情的人有所帮助

【讨论】：

【解决方案6】：

解决当前正确答案“单击字段显示屏幕键盘而不是日期选择器”中的问题：

该问题是由浏览器在单击 (=text) 时根据输入类型的行为引起的。因此，有必要停止关注输入元素（模糊），然后以编程方式重新关注输入元素，该输入元素在第一步中由 JS 定义为 type=date。键盘以电话号码模式显示。

<input placeholder="Date" type="text" onfocus="this.type='date';
                      this.setAttribute('onfocus','');this.blur();this.focus();">

【讨论】：

即使使用此代码，在 iOS 中（在 iOS 6、7 和 8 上测试）显示键盘片刻，然后显示日期选择器。有办法不显示键盘吗？
@JabelMárquez 你可以使用 readonly="true" 来阻止键盘显示......所以像这样： .对我有用。

【解决方案7】：

扩展 @mvp 的解决方案并考虑不显眼的 javascript，方法如下：

HTML：

<input type="text" placeholder="Date" class="js-text-date-toggle">

Javascript：

$('.js-text-date-toggle').on('focus', function() {
  $(this).attr('type', 'date') }
).on('blur', function() {
  $(this).attr('type'), 'text') }
)

【讨论】：

【解决方案8】：

它对我有用：

input[type='date']:after {
  content: attr(placeholder)
}

【讨论】：

唯一的问题是在您选择日期后删除占位符。占位符不会被删除。
在 iOS 9.3 上，Safari 会在选择日期时使 :after 伪元素消失。所以不需要删除占位符
选择日期后，只需添加onfocus="(this.placeholder='')" 即可删除占位符。
优秀！！！也为我工作，添加了@RobbieNolan 建议的 onfocus 效果很好。

【解决方案9】：

我在我的 css 中使用了这个：

input[type="date"]:before{
    color:lightgray;
    content:attr(placeholder);
}

input[type="date"].full:before {
    color:black;
    content:""!important;
}

然后把这样的东西放到javascript中：

$("#myel").on("input",function(){
    if($(this).val().length>0){
    $(this).addClass("full");
}
else{
   $(this).removeClass("full");
   }
 });

它适用于我的移动设备（Ios8 和 android）。但我使用 jquery inputmask 输入文本类型的桌面。如果您的代码在 ie8 上运行，这个解决方案是一个不错的方法。

【讨论】：

太棒了！只需设置“完整”类的初始状态，例如如果您正在编辑现有日期。
我建议我们应该在 iOS 上使用color: #aaa 来获得类似占位符的外观。 color: lightgray 太轻了。
很好的答案！您的代码使用 toggleClass 使 jQuery 更具可读性：$("#myel").on( "input" , function(){ $(this).toggleClass( "full" , $(this).val().length > 0 ); });
请记住，Firefox（和 Edge？）不支持元素上的 :before 和 :after 。 Chrome 可以，但这违反了 CSS 规范。

【解决方案10】：

我使用了这个 jQuery： http://jsfiddle.net/daviderussoabram/65w1qhLz/

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() {
    var el = this, type = $(el).attr('type');
    if ($(el).val() == '') $(el).attr('type', 'text');
    $(el).focus(function() {
        $(el).attr('type', type);
        el.click();
    });
    $(el).blur(function() {
        if ($(el).val() == '') $(el).attr('type', 'text');
    });
});

【讨论】：

请添加解释为什么它会有所帮助
@Davide Russo Abram：请添加解释，它是如何工作的？

【解决方案11】：

总结日期输入问题：

您必须显示它们（即避免显示：无）否则不会触发输入 UI；
占位符与它们相矛盾（根据规范，并且因为它们必须显示特定的 UI）；
在未聚焦的时间内将它们转换为另一种输入类型确实允许使用占位符，但聚焦会触发错误的输入 UI（键盘），至少在一小段时间内是这样，因为无法取消聚焦事件。
插入（之前）或添加（之后）内容不会阻止显示日期输入值。

我发现满足这些要求的解决方案是使用通常的技巧来设置原生表单元素的样式：确保元素显示但不可见，并通过其关联标签显示其预期样式。通常，标签将显示为输入（包括占位符），但在其上方。

所以，HTML 如下：

<div class="date-input>
  <input id="myInput" type="date"> 
  <label for="myInput"> 
    <span class="place-holder">Enter a date</span> 
  </label>
</div>

可以设置为：

.date-input {
  display: inline-block;
  position: relative;
}
/* Fields overriding */
input[type=date] + label {
  position: absolute;  /* Same origin as the input, to display over it */
  background: white;   /* Opaque background to hide the input behind */
  left: 0;             /* Start at same x coordinate */
}

/* Common input styling */
input[type=date], label {  
  /* Must share same size to display properly (focus, etc.) */
  width: 15em;
  height: 1em;
  font-size: 1em;
}

此类关联标签上的任何事件（单击、聚焦）都将反映在字段本身上，从而触发日期输入 UI。

如果您想现场测试这样的解决方案，您可以在平板电脑或手机上运行this Angular version。

【讨论】：

【解决方案12】：

所以我最终决定做的是在这里，它在所有移动浏览器（包括 iPhone 和 Android）上都可以正常工作。

$(document).ready(function(){

  $('input[type="date"]').each(function(e) {
    var $el = $(this), 
        $this_placeholder = $(this).closest('label').find('.custom-placeholder');
    $el.on('change',function(){
      if($el.val()){
        $this_placeholder.text('');
      }else {
        $this_placeholder.text($el.attr('placeholder'));
      }
    });
  });
  
});

label {
  position: relative;  
}
.custom-placeholder {
    #font > .proxima-nova-light(26px,40px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #999;
}

<label>
  <input type="date" placeholder="Date">
  <span class="custom-placeholder">Date</span>
</label>

日期

【讨论】：

【解决方案13】：

我认为您所要做的就是更改模型以说明日期字段可以为空，然后在需要时将 [Required] 放在上面。如果你这样做，占位符文本会出现。

【讨论】：

【解决方案14】：

我正在使用 ionicframework，@Mumthezir 提供的解决方案几乎是完美的。如果有人和我有同样的问题（更改后，输入仍然集中，滚动时，值只是消失）所以我添加了 onchange 来制作 input.blur()

<input placeholder="Date" class="textbox-n" type="text" onfocus=" (this.type='date')" onchange="this.blur();"  id="date">

【讨论】：

【解决方案15】：

嘿，所以我昨晚遇到了同样的问题，并想出了你所有的答案和一些闪闪发光的魔法的结合做得很好：

HTML：

<input type="date"  name="flb5" placeholder="Datum"     class="datePickerPlaceHolder"/>

CSS：

@media(max-width: 1024px) {
   input.datePickerPlaceHolder:before {
      color: #A5A5A5; //here you have to match the placeholder color of other inputs
      content: attr(placeholder) !important;
   }
}

jQuery：

$(document).ready(function() {
    $('input[type="date"]').change(function(){
            if($(this).val().length < 1) {
                $(this).addClass('datePickerPlaceHolder');
            } else {
                $(this).removeClass('datePickerPlaceHolder');
            }
    });
});

说明：所以，这里发生了什么，首先是在 HTML 中，这非常简单，只需做一个基本的 HMTL5-date-input 并设置一个占位符。下一站：CSS，我们设置了一个 :before-pseudo-element 来伪造占位符，它只是从输入本身获取占位符的属性。我只在 1024px 的视口宽度下才可以使用它 - 为什么我稍后会告诉。现在是 jQuery，在重构了几次之后，我想出了这段代码，它会检查每个更改是否设置了值，如果没有，它会（重新）添加类，反之亦然。

知道问题：

chrome 的默认日期选择器存在问题，这就是媒体查询的用途。它将在默认的“dd.mm.yyyy”前面添加占位符。您还可以将日期输入的占位符设置为“日期：”并调整输入中没有值的颜色...对我来说，这导致了一些其他较小的问题，所以我只是没有在“更大”上显示它' 屏幕

希望有帮助！加油！

【讨论】：

【解决方案16】：

根据 deadproxor 和 Alessio 的回答，我会尝试只使用 CSS：

input[type="date"]::before{
    color: #999;
    content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
    content: "" !important;
}

如果您需要在输入中写入内容后使占位符不可见，如果您的输入是必需的，我们可以尝试使用 :valid 和 :invalid 选择器。

编辑

如果您在输入中使用 required，请在此处输入代码：

input[type="date"]::before {
	color: #999999;
	content: attr(placeholder);
}
input[type="date"] {
	color: #ffffff;
}
input[type="date"]:focus,
input[type="date"]:valid {
	color: #666666;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
	content: "" !important;
}

&lt;input type="date" placeholder="Date" required&gt;

【讨论】：

因为这篇文章中没有提到，所以不要忘记在你的input中添加required，否则输入将永远是valid，这个解决方案将不起作用。
“必填”意味着您无法清除日期并查看您已倾注所有精力的占位符。噩梦。

【解决方案17】：

你可以

设置为文本类型
转换为焦点日期
点击它
...让用户查看日期
更改存储值
将输入设置为输入文本
将文本类型输入值设置为存储值

像这样……

$("#dateplaceholder").change(function(evt) {
  var date = new Date($("#dateplaceholder").val());
  $("#dateplaceholder").attr("type", "text");
  $("#dateplaceholder").val(date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
});
$("#dateplaceholder").focus(function(evt) {
  $("#dateplaceholder").attr("type", "date");
  setTimeout('$("#dateplaceholder").click();', 500);
});
$("#dateplaceholder").attr("type", "text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="date" id="dateplaceholder" placeholder="Set the date" />

【讨论】：

【解决方案18】：

截至今天（2016 年），我已经成功使用了这 2 个 sn-ps（而且它们与 Bootstrap4 配合得很好）。

左边输入数据，左边占位符

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}

点击时占位符消失

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}
input[type="date"]:focus:before {
  content: '' !important;
}

【讨论】：

【解决方案19】：

我最终使用了以下内容。

关于 Firefox 注释：通常，Firefox 不会为输入类型日期显示任何文本占位符。但由于这是一个 Cordova/PhoneGap 问题，因此无需担心（除非您想针对 FirefoxOS 进行开发）。

input[type="date"]:not(.has-value):before{
  color: lightgray;
  content: attr(placeholder);
}

&lt;input type="date" placeholder="MY PLACEHOLDER" onchange="this.className=(this.value!=''?'has-value':'')"&gt;

【讨论】：

这个版本不和其他类混了<input type="date" placeholder="MY PLACEHOLDER" onchange="this.classList.toggle('has-value',this.value);">
我使用它并添加了input[type="date"]:not(:focus):not(.has-value):before 以在输入集中显示格式（适用于键入日期而不是选择的人）

【解决方案20】：

基于 Mathijs Segers 的评论，在 iOS 上运行更好的 Mumthezir 版本的扩展：

（使用了一些 AngularJS，但希望你能明白。）

<label style='position:relative'>
    <input type="date" 
           name="dateField" 
           onfocus="(this.type='date')"
           ng-focus="dateFocus=true" ng-blur="dateFocus=false" />
    <span ng-if='!dateFocus && !form.date' class='date-placeholder'>
        Enter date
    </span>
</label>

因为它都包含在label 中，所以点击span 会自动聚焦input。

CSS：

.date-placeholder {
    display: inline-block;
    position: absolute;
    text-align: left;
    color: #aaa;
    background-color: white;
    cursor: text;
    /* Customize this stuff based on your styles */
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    line-height: 32px;
    padding-left: 12px;
}

【讨论】：

【解决方案21】：

从 Angular 的角度来看，我设法在输入类型日期元素中放置了一个占位符。

首先我定义了以下css：

.placeholder {
    color: $text-grey;
  }

  input[type='date']::before {
    content: attr(placeholder);
  }

  input::-webkit-input-placeholder {
    color: $text-grey;
  }

之所以需要这样做是因为如果css3内容与普通占位符颜色不同，所以我不得不使用一个普通的。

<input #birthDate
         class="birthDate placeholder"
         type="date"
         formControlName="birthDate"
         placeholder="{{getBirthDatePlaceholder() | translate}}"
         [class.error]="!onboardingForm.controls.birthDate.valid && onboardingForm.controls.birthDate.dirty"
         autocomplete="off"
         >

然后在模板中使用了 viewchildbirthDate 属性，以便能够从组件访问此输入。并在占位符属性上定义了一个角度表达式，它将决定我们是否显示占位符。这是该解决方案的主要缺点，您必须管理占位符的可见性。

@ViewChild('birthDate') birthDate;

getBirthDatePlaceholder() {
  if (!this.birthDate) {
    return;
  } else {
    return this.birthDate.nativeElement.value === '' ?
    'ONBOARDING_FORM_COMPONENT.HINT_BIRTH_DATE' :
    '';
  }
}

【讨论】：

【解决方案22】：

&lt;input placeholder="Date" type="text" onMouseOver="(this.type='date')" onMouseOut="(this.type='text')"  id="date" class="form-control"&gt;

修改后的 mumthezir 代码

【讨论】：

【解决方案23】：

如果您只关心移动设备：

input[type="date"]:invalid:before{
    color: rgb(117, 117, 117);
    content: attr(placeholder);
}

【讨论】：

【解决方案24】：

找到了一种更好的方法来处理用户基本理解，鼠标悬停并在点击时打开日期选择器：

<input type="text" onfocus="(this.type='date')" onmouseover="(this.type = 'date')" onblur="(this.value ? this.type = 'date' : this.type = 'text')" id="date_start" placeholder="Date">

同时隐藏 webkit 箭头并使其 100% 宽以覆盖点击：

input[type="date"] {
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;
}

【讨论】：

【解决方案25】：

HTML：

<div>
    <input class="ui-btn ui-btn-icon-right ui-corner-all ui-icon-calendar ui-shadow" id="inputDate" type="date"/>
    <h3 id="placeholder-inputDate">Date Text</h3>
</div>

JavaScript：

$('#inputDate').ready(function () {
$('#placeholder-inputDate').attr('style'
    , 'top: ' + ($('#placeholder-inputDate').parent().position().top + 10)
    + 'px; left: ' + ($('#placeholder-inputDate').parent().position().left + 0) + 'px; position: absolute;');
$('#inputDate').attr('style'
    , 'width: ' + ($('#placeholder-inputDate').width() + 32) + 'px;');
});

【讨论】：

这里不欢迎发布没有任何解释的代码。请编辑您的帖子。

【解决方案26】：

这是另一个可能的 hack，不使用 js，但仍然使用 css content。请注意，由于某些浏览器不支持:after进行输入，我们需要以另一种方式选择输入，content attr('')也是如此

input[type=date]:invalid+span:after {
  content:"Birthday";
  position:absolute;
  left:0;
  top:0;
}

input[type=date]:focus:invalid+span:after {
  display:none;
}

input:not(:focus):invalid {
  color:transparent;
}

label.wrapper {
	position:relative;
}

<label class="wrapper">
	<input
 	  type="date"
  	  required="required" 
	/>
	<span></span>
</label>

【讨论】：

【解决方案27】：

找到解决问题的更好方法。我想这会对你有所帮助。聚焦时，该框将类型更改为文本，因此它将显示您的占位符。聚焦时，其类型变为日期，因此将显示日历视图。

<input placeholder="Date" class="textbox-n" type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')"  id="date">

【讨论】：

【解决方案28】：

这适用于我使用它作为输入元素：

<input name="birthdate" class="" class="wpcf7-form-control wpcf7-date 
 wpcf7-validates-as-required wpcf7-validates-as-date birthdate" value="" 
 aria-required="true" aria-invalid="false" placeholder="birthdate *" 
 type="date">

此 CSS 显示一个永久占位符。所选值显示在占位符之后。

input[type="date"]:before {
    content: attr(placeholder) !important;
    margin-right: 0.5em;
    display: block;
}
/* only for FF */
@-moz-document url-prefix() {
    input[type="date"]:before {
        content: attr(placeholder) !important;
        margin-right: 0.5em;
        display: block;
        position: absolute;
        left: 200px; /* please adopt */
    }
}

我将此解决方案用于带有 contact-form-7 插件的 Wordpress 表单。

【讨论】：

【解决方案29】：

试试我的解决方案。我使用“必需”属性来了解输入是否已填充，如果没有，则显示属性“占位符”中的文本

//HTML
<input required placeholder="Date" class="textbox-n" type="date" id="date">

//CSS
input[type="date"]:not(:valid):before {
   content: attr(placeholder);
   // style it like it real placeholder
}

【讨论】：

dd/mm/yyyy 仍在 Chrome (70) 上显示。

【解决方案30】：

对于我来说，在 iOS 12 的 Chrome 上，没有一个解决方案可以正常工作，而且大多数解决方案都没有针对页面上可能的多个日期输入进行定制。我做了以下操作，这基本上在日期输入上创建了一个假标签，并在点击时将其删除。如果视口宽度超过 992 像素，我也会删除假标签。

JS：

function addMobileDatePlaceholder() {
    if (window.matchMedia("(min-width: 992px)").matches) {
        $('input[type="date"]').next("span.date-label").remove();
        return false;
    }

    $('input[type="date"]').after('<span class="date-label" />');

    $('span.date-label').each(function() {
        var $placeholderText = $(this).prev('input[type="date"]').attr('placeholder');
        $(this).text($placeholderText);
    });

    $('input[type="date"]').on("click", function() {
        $(this).next("span.date-label").remove();
    });
}

CSS：

@media (max-width: 991px) {
    input[type="date"] {
        padding-left: calc(50% - 45px);
    }

    span.date-label {
        pointer-events: none;
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        height: 27px;
        width: 70%;
        padding-top: 5px;
    }
}

【讨论】：