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

Question

荫做了PhoneGap的应用程序,当IAM试图type="date"如下图所示输入字段,,它显示在iPhone日期选择器如我所料,但它不显示我所提供的占位符.我在SO中发现了同样的问题,但在任何地方都没有解决方案,希望有人可以帮助我.谢谢.

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

Answer 1

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

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

Answer 2

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

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

希望这可以帮助.

Answer 3

我最终使用了以下内容.

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':'')">

Answer 4

我在我的CSS中用过这个:

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

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

并将这样的somenthing放入javascript:

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

它适用于我的移动设备(Ios8和Android).但我使用jquery输入掩码用于桌面输入文本类型.如果您的代码在ie8上运行,这个解决方案是一个很好的方法.

Answer 5

截至今天(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;
}

Answer 6

我采用了 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">

Answer 7

这个对我有用:

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

Answer 8

根据HTML标准:

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

Answer 9

我使用了这个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');
    });
});

Answer 10

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

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

Answer 11

根据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>

Answer 12

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