Question

我目前正在开发一个针对iPhone / iPad的网站。

将输入类型设置为日期会将字段外观更改为下拉菜单，而使用文本字段的占位符属性仅显示在桌面版本上，而不显示在iphone上。有没有解决的办法？

目前的情况如下; http://i44.tinypic.com/2u91xsz.png

我想摆脱那个结束日期文本，并且有类似于它上面的下拉菜单。

它基本上只是让我可以让用户知道他们输入了什么，而无需在屏幕上使用任何额外的空间，所以如果没有解决方案，这不是最大的问题。

Answer 1

我花了一段时间搞清楚这个，把它保留为type =＆＃34; text＆＃34;，并添加onfocus =＆＃34;（this.type =＆＃39; date＆＃39;）＆＃ 34;

我甚至喜欢上面提到的onblur

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

Answer 2

使用仅包含文本字段的占位符属性桌面版，而不是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

Answer 3

我已经使用了一些“：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网页浏览中运行良好

iOS上的“输入类型=日期”占位符？

3 个答案: