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

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

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

可能不合适……但这对我有所帮助。

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

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

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

希望这可以帮助。

我最终使用了以下内容。

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

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

<input type="date" placeholder="MY PLACEHOLDER" onchange="this.className=(this.value!=''?'has-value':'')">

我在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上运行，则此解决方案是一种不错的方法。

截至今天（2016年），我已经成功使用了这两个代码片段（另外，它们与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;
}

根据HTML标准：

以下内容属性不得指定且不适用于该元素：accept，alt，checked，dirname，formaction，formenctype，formmethod，formnovalidate，formtarget，height，inputmode，maxlength，minlength，multiple，pattern，placeholder，size， src和宽度。

这个对我有用：

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

我使用了白色的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');
    });
});

基于deadproxor和Alessio的答案，我将仅尝试使用CSS：

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

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

编辑

如果您在输入中使用必填项，请在此处输入以下代码：

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;
}

<input type="date" placeholder="Date" required>

找到了解决问题的更好方法。我认为这会对您有所帮助。聚焦后，该框会将类型更改为文本，以便显示您的占位符。重点关注时，其类型会更改为日期，因此将显示日历视图。

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

我采用了jbarlow的想法，但是我在onblur函数中添加了一个if，因此，如果该值为空，则字段仅更改其类型。

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

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

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

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

试试我的解决方案。我使用'required'属性来了解输入是否已填充，如果不是，则显示属性'placeholder'的文本

//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
}

花了我一会儿时间，将其保留为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">

希望这可以帮助那些不太了解以上情况的人

总结日期输入问题：

• 您必须显示它们（即避免显示：无），否则将不会触发输入用户界面；
• 占位符与它们矛盾（根据规范，并且因为它们必须显示特定的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。

如果您想实时测试这样的解决方案，则可以从平板电脑或手机上运行此Angular版本。

因此，我最终决定要做的事情就在这里，它在包括iPhone和Androids在内的所有移动浏览器上都能正常工作。

$(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>

日期

我使用@Mumthezir提供的ionicframework和解决方案几乎是完美的。如果有人遇到与我相同的问题（更改后，输入仍然聚焦，并且在滚动时，值就会消失），所以我添加了onchange来使input.blur（）

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

您可以

1. 将其设置为文字
2. 转换为关注日期
3. 点击它
4. ...让用户检查日期
5. 更改时存储值
6. 设置输入以键入文本
7. 将文本类型输入值设置为存储值

像这样...

$("#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" />

找到了一种更好的方式来处理用户的基本理解，即通过鼠标悬停并在单击时打开datepicker：

<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;
}

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

首先，我定义了以下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"
         >

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

@ViewChild('birthDate') birthDate;

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

<input placeholder="Date" type="text" onMouseOver="(this.type='date')" onMouseOut="(this.type='text')"  id="date" class="form-control">

经修订的Mumthezir代码

我很惊讶，只有一个答案与我使用的方法类似。
我从@Dtipson对@Mumthezir VP的回答的评论中得到了启发。

为此，我使用了两个输入，一个是假输入，type="text"在其上设置了占位符，另一个是带有的实数字段type="date"。
在mouseenter事件发生在他们的容器上时，我隐藏了伪造的输入并显示了真实的输入，而在mouseleave事件发生时则相反。显然，如果设置了值，我将保持真实输入可见。
我编写了使用纯Javascript的代码，但是如果您使用jQuery（我愿意），则很容易“转换”它。

// "isMobile" function taken from this reply:
// https://stackoverflow.com/a/20293441/3514976
function isMobile() {
  try { document.createEvent("TouchEvent"); return true; }
  catch(e) { return false; }
}

var deviceIsMobile = isMobile();

function mouseEnterListener(event) {
  var realDate = this.querySelector('.real-date');
  // if it has a value it's already visible.
  if(!realDate.value) {
    this.querySelector('.fake-date').style.display = 'none';
    realDate.style.display = 'block';
  }
}

function mouseLeaveListener(event) {
  var realDate = this.querySelector('.real-date');
  // hide it if it doesn't have focus (except
  // on mobile devices) and has no value.
  if((deviceIsMobile || document.activeElement !== realDate) && !realDate.value) {
    realDate.style.display = 'none';
    this.querySelector('.fake-date').style.display = 'block';
  }
}

function fakeFieldActionListener(event) {
  event.preventDefault();
  this.parentElement.dispatchEvent(new Event('mouseenter'));
  var realDate = this.parentElement.querySelector('.real-date');
  // to open the datepicker on mobile devices
  // I need to focus and then click on the field.
  realDate.focus();
  realDate.click();
}

var containers = document.getElementsByClassName('date-container');
for(var i = 0; i < containers.length; ++i) {
  var container = containers[i];
  
  container.addEventListener('mouseenter', mouseEnterListener);
  container.addEventListener('mouseleave', mouseLeaveListener);
  
  var fakeDate = container.querySelector('.fake-date');
  // for mobile devices, clicking (tapping)
  // on the fake input must show the real one.
  fakeDate.addEventListener('click', fakeFieldActionListener);
  // let's also listen to the "focus" event
  // in case it's selected using a keyboard.
  fakeDate.addEventListener('focus', fakeFieldActionListener);
  
  var realDate = container.querySelector('.real-date');
  // trigger the "mouseleave" event on the
  // container when the value changes.
  realDate.addEventListener('change', function() {
    container.dispatchEvent(new Event('mouseleave'));
  });
  // also trigger the "mouseleave" event on
  // the container when the input loses focus.
  realDate.addEventListener('blur', function() {
    container.dispatchEvent(new Event('mouseleave'));
  });
}

.real-date {
  display: none;
}

/* a simple example of css to make 
them look like it's the same element */
.real-date, 
.fake-date {
  width: 200px;
  height: 20px;
  padding: 0px;
}

<div class="date-container">
  <input type="text" class="fake-date" placeholder="Insert date">
  <input type="date" class="real-date">
</div>

我也在Android手机上对此进行了测试，当用户点击字段上显示日期选择器时，它也可以工作。唯一的事情是，如果实际输入没有任何值，并且用户没有选择日期就关闭了日期选择器，则输入将保持可见，直到他们点击它之外。没有事件可听，以了解日期选择器何时关闭，所以我不知道如何解决。

我没有iOS设备可以对其进行测试。

在考虑@mvp的解决方案的同时，请考虑使用兼容的Java脚本，方法如下：

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') }
)

我认为您要做的就是更改模型以使date字段为空，然后在需要时将[Required]放在其上。如果执行此操作，则会出现占位符文本。

嘿，所以昨晚我遇到了同样的问题，并想出了您所有答案和一些波光粼粼的魔术的完美结合：

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”之前添加占位符。您也可以将date输入的占位符设置为'date：'，并在输入中无值的情况下调整颜色...对我来说，这会导致其他一些较小的问题，因此我只在'bigger'中不显示它的屏幕

希望有帮助！加油！

如果您只关注移动设备：

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

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;');
});

这是另一种可能的不使用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>

使用此作为输入元素，这对我有用：

<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表单。

对于我来说，这些解决方案都无法在iOS 12中的Chrome上正常运行，并且大多数解决方案都不适合页面上可能存在的多个日期输入。我执行了以下操作，该操作基本上会在输入的日期上创建一个假标签，并在点击时将其删除。如果视口宽度超过992px，我还将删除虚假标签。

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;
    }
}