input type=date 移动端显示placeholder失效问题

1.html ：监听input失去焦点和获取焦点的事件

<input type="date" id="date" v-model="birthday" placeholder="出生年月日"@blur="inputBlur($event)" @focus="inputFocus($event)" />

2.css:用伪类去为input模拟一个placeholder

input[type="date"]:before{content: attr(placeholder);color:#00d9ff;
}

3.js (此处用vue实现)

export default {data() {return {birthday:'',}},methods:{inputBlur(e){$(window).scrollTop(0,0);if(this.birthday == '') e.target.setAttribute('placeholder','出生年月日');},inputFocus(e){e.target.removeAttribute('placeholder');}}
}

原生js同样的方法实现：

var o = document.getElementById('date');
o.onfocus = function(){this.removeAttribute('placeholder');
};
o.onblur = function(){if(this.value == '') this.setAttribute('placeholder','出生年月日');
};

input type=date 移动端显示placeholder失效问题相关推荐

手机端input[type=date]的时候placeholder不起作用解决方案
手机端input[type=date]的时候placeholder不起作用解决方案目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不 ...
手机端input[type=date]的placeholder不起作用
<div class="input clearfix"><label class="fl">起始日期</label>< ...
H5自带的type=date或者month等日期控件移动端显示placeholder
H5自带的type=date或者month等日期控件移动端placeholder会无法显示解决方法: html部分 <li class="info-item select-item& ...
html5手机端设置date,H5 input[type='date'] 优化 pc端和移动端的使用
标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, ...
HTML中INPUT type=date标签如何赋值注意问题
现在的html5 input标签支持type="date" 显示有日期的日历控件,一行简单的代码就能显示出一个日历控件,但是有的时候需要给它一个默认的日期值,这个时候可能就要用到v ...
input type=“date“
文章目录问题原因解决方法问题通过 <input type="date">标签选择时间然后提交到数据库,然后重新获取到值,通过设置value值,但是不能够显示 ...
input type=date 赋值
现在的html5 input标签支持type="date" 显示有日期的日历控件,一行简单的代码就能显示出一个日历控件,但是有的时候需要给它一个默认的日期值,这个时候可能就要用到v ...
html5中如何去掉input type date默认
html5中如何去掉input type date默认样式 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI: ::-webkit-datetime-edit ...
H5新特性 input type=date 在手机上默认提示显示无效解决办法
目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...

input type=date 移动端显示placeholder失效问题

input type=date 移动端显示placeholder失效问题相关推荐

最新文章

热门文章