input date 支持placeholder属性

第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能   ie,火狐,谷歌显示placeholder属性

css代码

#dateofday:before{  color:#808080;  content:attr(placeholder);  -webkit-appearance:textarea}

html代码

<input type="date" runat="server" placeholder="Birth Of Day"  id="dateofday"  onfocus="this.removeAttribute('placeholder')" onblur="this.setAttribute('placeholder','Birth Of Day')" />

onfocu后:                                                     onblur后:

                                   

 

第二种解决办法:ie浏览器报错  火狐不支持日历功能  谷歌支持日历功能, 火狐和谷歌显示placeholder属性

<input  type="text" placeholder="Date Of Day" onfocus="(this.type='date')"  onblur="(this.type='text')" />

onfocus后:                                  onblur后:

             

 

第三种解决方法:ie 火狐,谷歌,移动端都支持placeholder属性,但是只有移动端和谷歌有日历功能

<input  type="text" placeholder="Date Of Day" onfocus="this.setAttribute('type','date')"  onblur="this.setAttribute('type','text')" />

 

posted @ 2018-11-29 14:48  kuangx  阅读(1978)  评论(0编辑  收藏  举报