未显示输入 type = “ date”字段的占位符

根据 HTML 标准:

不能指定以下内容属性，也不能应用于元素: 接受、 alt、勾选、 dirname、 formaction、 formenctype、 formmethod、 formnovalid、 formtarget、 height、 inputmode、 maxlength、 minlength、 multi、 pattern、 占位符、 size、 src 和 width。

这可能不太合适，但是对我很有帮助。

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

您可以使用“ value”属性，例如:

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

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

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

Hope this helps.

我花了一些时间才弄明白这个问题，把它设置为 type="text"，然后添加 onfocus="(this.type='date')"，如上所示。

我甚至喜欢上面提到的关于红蓝侠的想法

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

希望这能帮助那些没有完全理解上面正在发生什么的人

在当前正确答案“点击字段显示屏幕上的键盘而不是数据采集器”中解决问题:

这个问题是由于浏览器在单击(= text)时根据输入类型进行操作造成的。因此，有必要停止关注输入元素(模糊) ，然后通过编程方式重新关注输入元素，这个元素在第一步中被 JS 定义为 type = date。键盘显示在手机号码模式。

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

在扩展@mvp 的解决方案时，考虑到 Unobtrusive 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') }
)

这对我很有用:

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

我在我的 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 输入掩码作为输入文本类型的桌面。如果您的代码在 ie8上运行，这种解决方案是一种很好的方式。

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

总结一下日期输入问题:

• 您必须显示它们(即避免显示: 无) ，否则输入 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。

如果你想现场测试这样的解决方案，你可以在平板电脑或手机上运行 这个角度的版本。

所以我决定在这里做的最后一件事就是它在所有的移动浏览器上都能正常工作，包括 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>

日期

我认为所有您需要做的就是修改模型，说 date 字段是空的，然后如果需要的话，在它上面加上[ Refied ]。如果这样做，占位符文本就会出现。

我使用的是@Mumthezir 提供的离子框架和解决方案，几乎是完美的。如果有人遇到和我一样的问题(修改之后，输入仍然是集中的，当滚动时，值就消失了) ，所以我添加了 onchange 来创建 input.amble ()

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

嘿，我昨晚碰到了同样的问题，发现你所有的答案和一些闪亮的魔法结合在一起做得很好:

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

说明: 那么，这里发生了什么，首先在 超文本标示语言中，这非常简单，只需要做一个基本的 HMTL5日期输入，并设置一个占位符。 下一步: CSS，我们将设置一个: before-伪元素来伪造占位符，它只是从输入本身获取占位符的属性。我使这只有从一个1024px 的视窗宽度下来-为什么我要告诉后来。 而现在的 JQuery，在重构了几次之后，我想出了这段代码，它将检查每一个变化，如果有一个值设置或没有，如果没有，它将(重新)添加类，反之亦然。

知道问题:

• Chrome 的默认日期选择器有一个问题，这就是媒体查询的目的。它将在默认的‘ dd.mm.yyyy’-thing 前面添加占位符。你也可以将日期输入的占位符设置为‘ date:’，并调整输入内部没有值的颜色... ... 对我来说，这导致了一些其他的小问题，所以我只是不在‘大’屏幕上显示它

希望能帮上忙！ 再见！

基于 dediproxor 和 Alessio 的答案，我会尝试只使用 CSS:

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

如果您需要在输入中写入某些内容后使占位符不可见，那么如果您的输入是必需的，我们可以尝试使用有效和无效的选择器。

剪辑

如果您在输入中使用了必需的代码，请在此输入:

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>

你可以的

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

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

我最终使用了以下方法。

关于 Firefox 注释 : 通常，Firefox 不会为输入类型 date 显示任何文本占位符。 但是，由于这是一个 Cordova/PhoneGap 问题，因此不必担心(除非您想针对 Firefox OS 开发)。

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

根据 Mathijs Segers 的评论，Mumthezir 版本在 iOS 上运行得更好:

(使用一些 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;
}

从角度的角度来看，我设法把一个占位符输入类型的日期元素。

首先，我定义了以下 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 birDate 属性，以便能够从组件访问此输入。并在占位符属性上定义了一个角度表达式，它将决定是否显示占位符。这是该解决方案的主要缺点，即必须管理占位符的可见性。

@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">

Revised code of mumthezir

如果你只关心手机:

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

找到了一个更好的方法来处理用户的基本理解，点击鼠标悬停并打开数据采集器:

<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">

还隐藏网页工具包箭头，使其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;
}

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 但仍然使用 csscontent的可能黑客攻击。注意，由于某些浏览器不支持 :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 placeholder="Date" class="textbox-n" type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')"  id="date">

使用 This 作为输入元素对我来说很有用:

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

我使用这个解决方案的 Wordpress 表单与 contact-form-7插件。

试试我的办法。我使用’必需’属性来了解是否填充了输入，如果没有，我将显示来自属性‘占位符’的文本

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

在我的 iOS12中，没有一个解决方案能够正常工作，而且大多数解决方案都不是为了处理页面上可能出现的多日期输入而量身定做的。我做了以下操作，基本上就是在日期输入上创建一个虚假标签，然后轻轻一按就将其删除。如果视窗宽度超过992px，我也会移除假标签。

约翰逊:

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

我采用了 jbarlow 的想法，但是我在 onFuzzy 函数中添加了一个 if，这样字段只有在值为空时才会改变它的类型

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

我很惊讶，只有一个答案的方法与我使用的类似。
我的灵感来自于@Dtison 对@Mumthezir 副总统答案的评论。

我为此使用了两个输入，一个是使用 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 设备来测试它。

这在某些情况下可能会有帮助。

<input type="text" id="date" onclick="this.type='date'" onblur="this.type='text'" placeholder="Date" class="textbox-n" name="myDate" />
      

在反应。我的情况！

const [date, setDate] = useState(false)

那么

<input type={`${date == true ? "date" : "text"}`} onFocus={() => setDate(true)} />

下面的解决方案对我很有效，我希望它也能对你有所帮助。

*{
box-sizing:border-box;
}
  

::placeholder {
opacity: 0;
visibility: hidden;
color: transparent;
}
.box{
min-height:500px;
}


.demo-field{
margin-bottom: 1.25rem;
position: relative;
}


input{
display: block;
width: 100%;
padding: 0.75rem 0.75rem;
font-size: 1rem;
}
    

.floating-label {
position: absolute;
left: 10px;
top: 14px;
padding: 2px 4px;
transition: all 0.3s ease;
cursor: text;
border-radius: 4px;
}
input:focus ~ .floating-label {
top: -13px;
left: 10px;
transition: all 0.2s ease-in-out;
background: #fff;
}
.demo-field .demo-input:not(:placeholder-shown).demo-input:not(:focus) ~ .floating-label {
top: -13px;
left: 10px;
background: #fff;
transition: all 0.2s ease-in-out;
}

<div class="box">
<div class="demo-field">
<input name="dob" id="dob" type="text"  onfocus="(this.type='date')" onblur="if(!this.value) this.type='text'" placeholder="Date of Birth*" class="demo-input"  />
<label for="dob" class="floating-label">Date of Birth*</label>
</div>
</div>

在 input = “ date”中使用占位符与控件的逻辑相矛盾。如果希望日期控件具有自定义逻辑，请尝试在组件库中找到解决方案并从中获得日期控件。 例如，您可以使用 自举数据采集器，它取决于 input = “ type”来显示日期 < a href = “ https://bootstrap-datepicker.readthedocs.io/en/update/”rel = “ nofollow norefrer”> https://bootstrap-datepicker.readthedocs.io/en/latest/

另一种解决方案是 平板电脑 https://flatpickr.js.org/examples/

$("#txtDate").flatpickr({});

<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>


<div class="flatpickr">
<input id="txtDate" type="text" placeholder="Select Date.." data-input> <!-- input is mandatory -->


<a class="input-button" title="toggle" data-toggle>
<i class="icon-calendar"></i>
</a>


<a class="input-button" title="clear" data-clear>
<i class="icon-close"></i>
</a>
</div>