Trường ngày và văn bản giữ chỗ của HTML5 trong Safari

Question

Tôi gặp sự cố, nhưng tôi không chắc đó có phải là điều tôi đang làm sai hay tính năng này chưa được hỗ trợ.

Về cơ bản tôi có các dòng mã sau đây:

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

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

Tôi đã thử nghiệm điều này trên phiên bản máy tính để bàn của Safari và tất cả đều tốt, nhưng khi tôi thử nghiệm nó trên iPad, đầu vào thứ hai không hiển thị văn bản trình giữ chỗ. Có ai biết nếu văn bản giữ chỗ được hỗ trợ trên loại = "ngày" trên iPad?

Chúc mừng Nick

Answer 1

iPad đang làm đúng. Thuộc tính placeholderisn't supported on input elements on type date. Nó có thể làm việc trên Safari trên máy tính để bàn vì điều đó không hỗ trợ loại date, vì vậy thuộc tính đó bị bỏ qua và bạn bị bỏ lại với một trường văn bản thuần túy. Bạn có thể kiểm tra trong thanh tra DOM.

Answer 2

bit hack bit tại đây ...

Ban đầu có trường dưới dạng trường văn bản. Khi người dùng tập trung vào trường, hãy chuyển loại trường thành ngày và tập trung lại.

thử nghiệm trong 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> 

Answer 3

Sử dụng các giải pháp của 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';"/> 

Answer 4

CSS dành cho iOS Safari:

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

Sau đó sử dụng giữ chỗ vào ngày đầu vào:

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