HTML5 поле даты и заполнитель текста в Safari - PullRequest
Новая
       36

HTML5 поле даты и заполнитель текста в Safari

9 голосов
/ 08 декабря 2011

У меня проблема, но я не уверен, что я что-то не так делаю или эта функция просто еще не поддерживается.

В основном у меня есть следующие строки кода: 

<input type="text" name="lastname" id="lastname" value="" placeholder="Last name" />

<input type="date" name="dob" id="dob" value="" placeholder="Date of birth" />

Я протестировал это на настольной версии Safari и все хорошо, но когда я тестирую это на iPad, второй вход не показывает текст заполнителя.Кто-нибудь знает, поддерживается ли текст-заполнитель для type = "date" на iPad?

Cheers Nick

Ответы [ 4 ]

8 голосов
/ 08 декабря 2011

iPad делает правильные вещи.Атрибут placeholder не поддерживается для input элементов типа date.Вероятно, он работает на настольном Safari, потому что он не поддерживает тип date, поэтому этот атрибут игнорируется, и у вас остается текстовое поле.Вы можете проверить инспектора DOM.

5 голосов
/ 11 февраля 2014

Немного взломанного здесь ...

Изначально имейте поле как текстовое поле. Когда пользователь фокусируется на поле, переключите тип поля на дату и измените фокусировку.

протестировано в ios6

HTML 

<input type="text" placeholder="DOB" id="dob" />

JS 

<script>

    var textbox = document.getElementById('dob')
        textbox.onfocus = function (event) {
            this.type = 'date';
            this.focus();
    }

</script>
3 голосов
/ 20 апреля 2015

Использование раствора сидарцев: 

<input type="date" name="dob" id="dob" value="" 
   placeholder="Date of birth"  
   onfocus="this.type='date';this.focus();" 
   onblur="if(this.value == '') this.type='text';"/>
2 голосов
/ 19 августа 2016

CSS для iOS Safari: 

input[type='date']:after {
  color: #aaa;
  content: attr(placeholder);
}

Затем используйте заполнитель при вводе даты: 

<input name="mydate" type="date" value="" placeholder="Select a date" />
...