Html 不显示输入类型=“日期”字段的占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20321202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Not showing placeholder for input type="date" field
提问by Mumthezir VP
I am doing a phonegap app. When I am trying type="date"input field as shown below, it shows date picker in iPhone as I expected but it doesn't show the placeholder I have given. I found the same issue here in SO, but no solution anywhere.
我正在做一个phonegap应用程序。当我尝试type="date"如下所示的输入字段时，它按照我的预期在 iPhone 中显示日期选择器，但没有显示我提供的占位符。我在 SO 中发现了同样的问题，但在任何地方都没有解决方案。
<input placeholder="Date" class="textbox-n" type="date" id="date">
回答by Mumthezir VP
It may not be appropriate... but it helped me.
这可能不合适……但它帮助了我。
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">回答by jbarlow
If you use mvp's method but add the onblur event to change it back to a text field so the placeholder text appears again when the input field looses focus. It just makes the hack a little bit nicer.
如果您使用 mvp 的方法但添加 onblur 事件将其更改回文本字段，则当输入字段失去焦点时，占位符文本会再次出现。它只是让黑客更好一点。
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" />Hope this helps.
希望这可以帮助。
回答by fentas
I ended up using the following.
我最终使用了以下内容。
Regarding Firefox comment(s): Generally, Firefox will not show any text placeholder for inputs type date. But as this is a Cordova/PhoneGap question this should be of no concern (Unless you want to develop against FirefoxOS).
关于 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':'')">回答by Alessio Kenta Di Crescenzo
I used this in my css:
我在我的 css 中使用了这个：
input[type="date"]:before{
color:lightgray;
content:attr(placeholder);
}
input[type="date"].full:before {
color:black;
content:""!important;
}
and put somenthing like this into javascript:
并将这样的东西放入 javascript 中：
$("#myel").on("input",function(){
if($(this).val().length>0){
$(this).addClass("full");
}
else{
$(this).removeClass("full");
}
});
it works for me for mobile devices (Ios8 and android). But I used jquery inputmask for desktop with input text type. This solution it's a nice way if your code run on ie8.
它适用于我的移动设备（Ios8 和 android）。但是我使用 jquery inputmask 作为输入文本类型的桌面。如果您的代码在 ie8 上运行，则此解决方案是一种不错的方法。
回答by romaricdrigon
As of today (2016), I have successfully used those 2 snippets (plus they work great with Bootstrap4).
截至今天（2016 年），我已经成功地使用了这 2 个代码片段（而且它们与 Bootstrap4 配合得很好）。
Input data on the left, placeholder on the left
左边输入数据，左边占位符
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.5em;
}
Placeholder disappear when clicking
单击时占位符消失
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.5em;
}
input[type="date"]:focus:before {
content: '' !important;
}
回答by deadproxor
It works for me:
这个对我有用：
input[type='date']:after {
content: attr(placeholder)
}
回答by int32_t
According to the HTML standard:
根据HTML 标准：
The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder, size, src, and width.
以下内容属性不得指定且不适用于元素：accept、alt、checked、dirname、formaction、formenctype、formmethod、formnovalidate、formtarget、height、inputmode、maxlength、minlength、multiple、pattern、placeholder、size、 src 和宽度。
回答by Davide Russo Abram
I used this whit jQuery: http://jsfiddle.net/daviderussoabram/65w1qhLz/
我用过这个 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');
});
});
回答by Kawaldeep Singh
Found a better way to solve your problem. I think this will help you. when focused out, the box will change type into text so it will show your placeholder. when focused in, its type changes into date so the calendar view will be shown.
找到了更好的方法来解决您的问题。我认为这会对你有所帮助。聚焦后，该框会将类型更改为文本，以便显示您的占位符。聚焦时，其类型会更改为日期，因此将显示日历视图。
<input placeholder="Date" class="textbox-n" type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')" id="date">
回答by Yuri
Based on deadproxor and Alessio answers, I would try only using CSS:
基于 deadproxor 和 Alessio 的答案，我会尝试只使用 CSS：
input[type="date"]::before{
color: #999;
content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
content: "" !important;
}
And if you need to make the placeholder invisible after writing something in the input, we could try using the :valid and :invalid selectors, if your input is a required one.
如果您需要在输入中写入内容后使占位符不可见，我们可以尝试使用 :valid 和 :invalid 选择器，如果您的输入是必需的。
EDIT
编辑
Here the code if you are using required in your input:
如果您在输入中使用 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;
}<input type="date" placeholder="Date" required>