HTML5 date field and placeholder text in Safari

问题:

I've got an issue, but I'm not sure if it's something I'm doing wrong, or if this feature just isn't supported yet.

Basically I have the following lines of code:

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

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

I've tested this on the desktop version of Safari and all good, but when I test it on the iPad, the second input doesn't show the placeholder text. Does anyone know if placeholder text is supported on type="date" on the iPad?

Cheers Nick

回答1:

The iPad is doing the correct thing. The placeholder attribute isn't supported on input elements on type date. It's probably working on desktop Safari because that doesn't support the date type, so that attribute is being ignored and you're left with a plain text field. You could check in the DOM inspector.

回答2:

Slight hack bit here goes...

Initially have the field as a text field. When the user focuses on the field switch the fields type to date and re-focus.

tested in 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:

Using the solution of sidarcy:

<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';"/>

回答4:

CSS for iOS Safari:

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

Then use placeholder on date input:

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