我目前正在开发一个针对 iPhone/iPad 的网站。
将输入类型设置为日期会将字段外观更改为下拉菜单，并且适用于文本字段的占位符属性仅显示在桌面版本上，而不显示在 iPhone 上。有没有解决的办法？
这是它目前的样子； http://i44.tinypic.com/2u91xsz.png
我想去掉那个截止日期文本，并有一些类似于它上面的下拉菜单的东西。
它基本上只是为了让我可以让用户知道他们正在输入什么，而无需在屏幕上使用任何额外的空间，所以如果没有解决方案，这不是最大的问题。
【问题讨论】：
标签： iphone html placeholder
适用于文本字段的占位符属性仅显示在 桌面版，不是在iphone上。有没有办法解决这个问题？
尝试使用 javascript 和 css。
<div id="closing_date">
<label for="closing_date_field" class="overlabel">Closing Date</label>
<input id="closing_date_field" type="date" name="closing_date">
</div>
见代码here
【讨论】：
我已经使它与一些 ":before" 伪类和一小部分 javascript 一起工作。 您的输入必须有一个类或 id。这是一个 id 为“myInput”的示例
#myInput:before{ content:"Date of birth"; width:100%; color:#AAA; }
#myInput:focus:before,
#myInput.not_empty:before{ content:none }
然后在 javascript 中，根据 onChange 和 onKeyUp 事件中的值添加“not_empty”类。
您甚至可以在每个日期字段上动态添加所有这些内容。
这是一个粗略的代码：
$('input[type=date]').each(function(){
var input=$(this);
var id=input.attr('id');
if (!id){
id='RandomGeneratedId_'+Math.random().toString(36).substring(7);
input.attr('id',id);
}
var placeholder=input.attr('placeholder');
if (placeholder){
$('head').append('<style> #'+id+':before{ content:"'+placeholder+'"; width:100%; color:#AAA; } #'+id+':focus:before,#'+id+'.not_empty:before{ content:none }</style>');
}
input.on('change keyup',function(){
if ($(this).val()){
$(this).addClass('not_empty')
}else{
$(this).removeClass('not_empty')
}
return false;
});
});
它并不完美，但在 Chrome 和 iOS7 网络视图中运行良好
【讨论】：
content:attr(placeholder); 允许 HTML 设置内容。
我花了一些时间才弄清楚这个，把它保留为 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">
【讨论】：