"input type = date" placeholder на iOS?

Question

В настоящее время я разрабатываю веб-сайт, предназначенный для iPhones/iPads.

Установка типа ввода на дату изменяет внешний вид поля в выпадающем меню, а атрибут placeholder, который работает с текстовыми полями, отображается только на настольной версии, а не на iphone. Есть ли способ обойти это?

Так выглядит в настоящее время; http://i44.tinypic.com/2u91xsz.png

Я хочу избавиться от текста даты закрытия и иметь что-то похожее на выпадающее меню над ним.

В основном это так, что я могу сообщить пользователю, что они входят, без необходимости использовать дополнительное пространство на экране, поэтому его не самая большая проблема, если нет решения.

Answer 1

атрибут 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

Answer 2

Я сделал это работать с некоторыми «: прежде, чем» псевдо-класса и маленький кусочек JavaScript. На вашем входе должен быть класс или идентификатор. Вот пример с идентификатором «myInput»

#myInput:before{ content:"Date of birth"; width:100%; color:#AAA; } 
#myInput:focus:before, 
#myInput.not_empty:before{ content:none } 

Затем в JavaScript, добавить класс «not_empty» в зависимости от значения в событиях OnChange и OnKeyUp.

Вы можете добавить все это динамически в каждое поле даты.

Вот примерный код, чтобы сделать это:

$('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 webviews

Answer 3

Взял меня некоторое время, выясняя это один из, оставить его как тип = "текст", и добавить OnFocus = "('дата' this.type =)"

я даже как ONBLUR я видел упомянутый

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