平时切页面还真没注意到这个问题,第一反应就是高度行高,后来百度发现这个就是一个bug。看到很多网站是用span来代替placeholder,配合js一起引用,脑袋突然想到另外一个思路。
p1)给input添加一个自定义属性代替placeholder如:data-holder="请输入"
p2)检测input身上是否有data-holder属性,如果有先把input的字体颜色变灰,同时获取这个属性上的文字赋值给input的value
p3)鼠标点击input,判断如果当前value与data-holder属性的文字一致那么清空。不是就保留value值
p4)失去焦点后如果当前value的值为空那么显示data-holder属性的文字
function initinput(){
$('input').each(function(){
var _this = $(this);
var _valur = _this.data('holder');
if(_this.attr("data-holder")){
_this.css("color","#757575").val(_valur);
}
})
$(document).off('focus', 'input').on('focus', 'input', function () {
var $this = $(this);
if($this.attr("data-holder")){