荫做了PhoneGap的应用程序,当IAM试图type="date"
如下图所示输入字段,,它显示在iPhone日期选择器如我所料,但它不显示我所提供的占位符.我在SO中发现了同样的问题,但在任何地方都没有解决方案,希望有人可以帮助我.谢谢.
Mumthezir VP.. 136
这可能不合适......但它终于帮助了我.
看起来像一个很好的功能,但点击该字段显示屏幕键盘而不是datepicker.不错的尝试. (7认同)
嗯,是一个恶心的.我在日期字段中添加了一个带有文本字段外观的跨度,使其仅在ios上可见.datepicker的z索引高于span,但css为alpha 0.01.Onclick我会透露日期字段.它有效,但有点讨厌. (7认同)
对于cordova应用程序,使用**onmouseenter**事件而不是**onfocus**事件,然后,日期选择器将在第一次单击时打开 (3认同)
@MathijsSegers你找到了一个不显示键盘的解决方案吗?我在这里尝试了这个解决方案,但是在iOS 6,7和8中,键盘显示了一段时间,然后显示了日期选择器. (2认同)
我注意到这在iOS设备上不起作用,有人对此有解决方案吗? (2认同)
小智.. 79
如果您使用mvp的方法但添加onblur事件以将其更改回文本字段,以便在输入字段失去焦点时再次显示占位符文本.它只是使黑客更好一点.
希望这可以帮助.
截至今天(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; }
我最终使用了以下内容.
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,placeholder,size, src和宽度.
这个对我有用:
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; }
并将这样的somenthing放入javascript:
$("#myel").on("input",function(){ if($(this).val().length>0){ $(this).addClass("full"); } else{ $(this).removeClass("full"); } });
它适用于我的移动设备(Ios8和Android).但我使用jquery输入掩码用于桌面输入文本类型.如果您的代码在ie8上运行,这个解决方案是一个很好的方法.
根据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" onfocus="(this.type='date')" id="date">
找到了解决问题的更好方法。我认为这会对您有所帮助。聚焦后,该框会将类型更改为文本,以便显示占位符。重点关注时,其类型会更改为日期,因此将显示日历视图。
<input placeholder="Date" class="textbox-n" type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')" id="date">
我使用了这个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'); }); });
如果您使用mvp的方法但添加onblur事件以将其更改回文本字段,以便在输入字段失去焦点时再次显示占位符文本.它只是使黑客更好一点.
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">
希望这可以帮助.