3/13

为您的设计
寻找专业的前端切图服务。

input的type为date的placeholder无效解决

这是在切图网(qietu.com)一个手机h5网站开发中碰到的问题,因为需要调用手机自带的日期选择器,我们选择了html5自带的type类型:date

<input type=date />

但是还需要默认有一个提示:请选择时间 ,所以我们理所当然写成了这样

<input type=date placeholder=请选择时间 />

但是当我们拿起手机测试的时候,无论是安卓,还是苹果均不能显示placeholder属性,最后一查才知道,不仅仅是类型为date,还有day,time,localdate等等也是不支持的,只有通过js来解决了

大致的思路是这样:

1,input的type还是text (默认),设置placeholder,因为这个时候是有效的

2,input获取焦点的时候focus,修改type类型为date

需要注意的是jquery不支持修改type类型,只有通过原生JS来操作:

  1. <script>
  2. var textbox = document.getElementById(‘birthday’)
  3. textbox.onfocus = function (event) {
  4. this.type = ‘date’;
  5. this.focus();
  6. }
  7. </script>

或者

<input placeholder=”Date” type=”text” onfocus=”(this.type=’date’)” id=”date”>

切图网首推前端实战培训——切入口(qierukou.com),开班在即,报名从速。