заполнитель "input type = date" на iOS? - PullRequest
Новая
       5

заполнитель "input type = date" на iOS?

5 голосов
/ 08 марта 2012

В настоящее время я занимаюсь разработкой веб-сайта, предназначенного для iPhone / iPad.

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

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

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

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

Ответы [ 3 ]

3 голосов
/ 09 июля 2014

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

мне даже нравится онблур, о котором я уже упоминал 

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">
2 голосов
/ 29 января 2014

Я заставил его работать с некоторым псевдоклассом ": before" и небольшим количеством 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

2 голосов
/ 08 марта 2012

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

см. Код здесь

...