不显示inputtypes=“date”字段的占位符
Iam正在做一个phonegap应用程序，当IAM尝试type="date"input字段如下所示，它显示iPhone中的dateselect器，因为我预期，但它不显示我给的占位符。 我在这里发现了同样的问题，但没有解决任何地方，希望有人可以帮助我。 谢谢。
<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字段丢失焦点时再次出现占位符文本。 它只是使黑客更好一点。
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">
希望这可以帮助。
我在我的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）。 但我用jQueryinput掩码与input文本types的桌面。 如果你的代码运行在ie8上，这个解决scheme是一个很好的方法。
我用这个惠特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'); }); });
我结束了使用以下。
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':'')">
根据HTML标准 ：
以下内容属性不得指定，不适用于元素：accept，alt，checked，dirname，formaction，formenctype，formmethod，formnovalidate，formtarget，height，inputmode，maxlength，minlength，multiple，pattern， 占位符 ，大小， src和宽度。
它适用于我：
input[type='date']:after { content: attr(placeholder) }
基于deadproxor和Alessio的答案，我会尝试只使用CSS：
input[type="date"]::before{ color: #999; content: attr(placeholder) ": "; } input[type="date"]:focus::before { content: "" !important; }
如果在input内容中写入某些东西之后，需要使占位符不可见，那么如果input是必需的，我们可以尝试使用：valid和：invalidselect器。
编辑
这里的代码，如果你正在使用您的input所需：
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>
截至今天（2016年），我已经成功地使用了这两个片段（加上他们与Bootstrap4很好）。
在左边input数据，在左边占位符
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; }
解决当前正确答案中的问题“单击该字段将显示屏幕键盘而不是dateselect器”：
这个问题是由浏览器在点击（=文本）时根据inputtypes引起的。 因此，必须停止关注input元素（模糊），然后以编程方式重新启动焦点，在第一步中由JS定义type = date的input元素。 键盘以电话号码模式显示。
<input placeholder="Date" type="text" onfocus="this.type='date'; this.setAttribute('onfocus','');this.blur();this.focus();">
所以我最终决定做的就是在这里，它在包括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>
我使用@Mumthezir提供的ionic framework和解决scheme几乎是完美的。 如果有人会和我有同样的问题（改变后，input仍然集中，滚动时，价值只是消失）所以我添加onchange input.blur（）
<input placeholder="Date" class="textbox-n" type="text" onfocus=" (this.type='date')" onchange="this.blur();" id="date">
您可以
- 将其设置为文本types
- 转换为重点date
- 点击它
- 让用户检查date
- 在更改存储的价值
- 设置input以键入文本
- 将文本typesinput值设置为存储的值
喜欢这个…
$("#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" />
花了我一会儿，弄明白这一点，把它留在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">
希望这可以帮助那些不太了解上面发生的事情的人
总结dateinput问题：
- 你必须显示它们（即避免显示：无）否则input的UI将不会被触发;
- 占位符与它们是矛盾的（按照规范，因为它们必须显示特定的UI）;
- 将它们转换为另一种inputtypes的时间可以允许占位符，但是焦点会触发错误的inputUI（键盘），至less在很短的时间内，因为焦点事件不能被取消。
- 插入（之前）或添加（之后）内容不会阻止显示dateinput值。
我发现满足这些要求的解决scheme是使用通常的技巧来devise原生的表单元素：确保元素被显示但不可见，并通过其关联的标签显示其期望的样式 。 通常情况下，标签将显示为input（包括占位符），但在其上。
所以，一个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; }
任何事件（点击，焦点）在这样一个相关的标签将反映在领域本身，所以触发dateinput用户界面。
如果你想现场testing这样的解决scheme，你可以从平板电脑或手机上运行这个Angular版本 。
你可以使用属性“值”
例如：
<input type="date" value="Date" class="textbox-n" id="date"/>
在@ mvp的解决scheme的基础上，不要介意的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') } )
我想所有你需要做的就是改变模型，说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'); } }); });
说明：所以，这里发生的事情，首先在HTML中 ，这是非常简单的做一个基本的HMTL5dateinput，并设置一个占位符。 下一站： CSS ，我们正在设置一个：before-pseudo-element来伪造我们的占位符，它只是从input本身获取占位符的属性。 我只能从1024像素的视口宽度下载 – 为什么我会告诉以后。 而现在jQuery ，重构了几次后，我想出了这一点的代码，将检查每一个变化，如果有一个值设置与否，如果它不会（重新）添加类，反之亦然。
知道的问题：
- chrome中的默认dateselect器存在问题，那就是媒体查询的目的。 它将添加默认的“dd.mm.yyyy”事物的占位符。 你也可以将dateinput的占位符设置为'date：'，并调整input内部没有值的颜色…对我来说，这导致了一些其他小问题，所以我只是没有显示'更大'屏幕
希望有所帮助！ cheerio！
从angular度来看，我设法把一个占位符放在inputtypes的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属性，以便能够从组件访问此input。 并在占位符属性上定义了一个angular度expression式，这将决定我们是否显示占位符。 这是解决scheme的主要缺点，就是您必须pipe理占位符的可见性。
@ViewChild('birthDate') birthDate; getBirthDatePlaceholder() { if (!this.birthDate) { return; } else { return this.birthDate.nativeElement.value === '' ? 'ONBOARDING_FORM_COMPONENT.HINT_BIRTH_DATE' : ''; } }
在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; }
