**昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家。。**

==============================================

一、解决ie9以下input 无placeholder问题

解决方案一:jquery实现
  • 当浏览器不支持placeholder属性时,克隆一个和界面相同的input框,将placeholder的值设置为其value值,覆盖在界面input框所在位置,并将界面上的input隐藏掉
    调用方法:

     $(#selector).placeholder();(selector泛指css 的 id选择器)
  • 当文本框type=password时,引用此placeholder方案会使暗文密码变成明文密码
  • 如果input文本框使用了bootstrap 行高会高一点,要修改placeholder内的文字样式 可在placeholder.js里<span></span>中添加style属性如:


    <span style="font-size: 13px;padding-top: 8px;"></span>

    如果是普通的input 则无需添加style属性,


提取demo 链接:https://pan.baidu.com/s/1AMl6... 密码:zs9c

解决方案二: js/jQuery实现
  • 实现思路:
    1、首先判断浏览器是否支持placeholder属性,如果不支持则使用模拟placeholder
    2、创建一个label标签:<label>密码</label>
    标签里面的内容为所要添加的提示文字,该文字应该从对应的input|textarea标签取得其placeholder属性值,再将label标签遮盖
    到所对应的input|textarea上
    3、代码实现如下:
  (function (win) {

    win.isPlaceholer = function () {
var input = document.createElement("input");
return "placeholder" in input;
}; win.placeholder = function () { if (!isPlaceholer()) {
var Placeholder =function (obj) {
this.input = obj;
var te = obj.getAttribute('placeholder');
this.label = document.createElement('label');
this.label.innerHTML = te;
this.label.id = obj.id + 'Label';
this.label.style.cssText = 'position:absolute; text-indent:4px;color:#999999; font-size:14px;';
if (obj.value !== '') {
this.label.style.display = 'none';
}
this.init();
};
Placeholder.prototype = { getxy: function (obj) {
var left, top;
if (document.documentElement.getBoundingClientRect) {
var html = document.documentElement,
body = document.body,
pos = obj.getBoundingClientRect(),
st = html.scrollTop || body.scrollTop,
sl = html.scrollLeft || body.scrollLeft,
ct = html.clientTop || body.clientTop,
cl = html.clientLeft || body.clientLeft;
left = pos.left + sl - cl;
top = pos.top + st - ct;
} else {
while (obj) {
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
}
return {
left: left,
top: top
};
}, getwh: function (obj) {
return {
w: obj.offsetWidth,
h: obj.offsetHeight
};
}, setStyles: function (obj, styles) {
for (var p in styles) {
obj.style[p] = styles[p] + 'px';
}
},
init: function () {
var label = this.label,
input = this.input,
getXY = this.getxy,
xy = this.getxy(input),
wh = this.getwh(input);
this.setStyles(label, { 'width': wh.w, 'height': wh.h, 'lineHeight': 40, 'left': xy.left + 8, 'top': xy.top });
document.body.appendChild(label);
label.onclick = function () {
this.style.display = "none";
input.focus();
};
input.onfocus = function () {
label.style.display = "none";
};
input.onblur = function () {
if (this.value === "") {
label.style.display = "block";
}
};
if (window.attachEvent) {
window.attachEvent("onresize", function () {
var xy = getXY(input);
Placeholder.prototype.setStyles(label, { 'left': xy.left + 8, 'top': xy.top });
});
} else {
window.addEventListener("resize", function () {
var xy = getXY(input);
Placeholder.prototype.setStyles(label, { 'left': xy.left + 8, 'top': xy.top });
}, false);
}
}
}; var inpColl = $("#Box input:visible");//这里是页面上要添加placeholder支持的input
//var inpColl = document.getElementsByTagName('input'),
var textColl = document.getElementsByTagName('textarea');//这里是页面上要添加placeholder支持的textarea
//var lableArr = $("#Box lable");
var toArray = function (coll) {
for (var i = 0, a = [], len = coll.length; i < len; i++) {
a[i] = coll[i];
}
return a;
};
var inpArr = toArray(inpColl),
textArr = toArray(textColl), placeholderArr = inpArr.concat(textArr);
for (var i = 0; i < placeholderArr.length; i++) {
if (placeholderArr[i].getAttribute('placeholder') !== null) { new Placeholder(placeholderArr[i]);
}
}
} };
}(window));

二、解决placeholder在ios上的小坑

  • 在苹果高版本iPhone6、7 上发现了一个问题,当设置placeholder显示的字体大小的时候,会被遮挡掉一部分

解决方法:先设置input 里面的字体大小需要大于placeholder的字体大小

三、让 placeholder 换行

  1. 在input 里面很少用到,input就只有一行而已,多行的话就会使用textarea标签,确实在textarea标签里面如何让placeholder换行是一个麻烦事,由于不同浏览器兼容性还不一样. 这里提供一个简单的实现方法
    jq_watermark,一个基于jQuery的小插件,min版本才2.8KB 使用方式 导入jQuery,导入jq_watermark,
    jq_watermark在github上的下载地址 给textarea 加上名为 jq_watermark 的class

<textarea name="" class="jq_watermark" cols="110" rows="10" required placeholder="第一行<br/>第二行<br/>第三行"></textarea>

原文链接:https://blog.csdn.net/qq_2959...

三、解决 placeholder 兼容性之修改样式

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}

========================================================================


解决input 中placeholder的那些神坑的更多相关文章

  1. css设置input中placeholder字体

    设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@ ...

  2. Hmtl5 <input>中placeholder属性(新属性)

    Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示 ...

  3. 解决IE中placeholder的兼容问题

    定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 &l ...

  4. 解决input中智能提示框onblur与onclick冲突的问题

    背景: 制作一个类似百度输入法的智能提示框, 其中当关键词输入进来时,会有智能提示展开,实际需求是当点击智能提示框的汉字时,输入框中自动补全并关闭智能提示, 当点击其他区域时,智能提示框自动隐藏,如下 ...

  5. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...

  6. 移动端 华为手机 input中placeholder垂直居中失效

    为一个app写了一个嵌套的提现页面,效果如下图 input给定宽高,给了line-heigh,在浏览器查看效果正常,placeholder内容以及光标显示都是垂直居中的, IOS显示正常, Andro ...

  7. placeholder 解决UITextField中placeholder和text文本同时显示的问题

    TextField都使用了placeholder属性,但在代码中又设置了text属性,因此ViewController会同时显示placeholder文本和text文本. 这个问题让我彻底崩溃.按道理 ...

  8. 解决HTML5中placeholder属性兼容性的JQuery插件

    //调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...

  9. 设置input中placeholder的样式(placeholder设置字体)

    方法: 代码示例: .input::-webkit-input-placeholder { font-size: 3.73333333vw; color: #cccccc; } .input:-moz ...

随机推荐

  1. 查询sq字段逗号分隔的方式

    2,3,4 -- select * from t_qs_anlycomagingconfig twhere and ( to_char(','||t.valid_month||',') like '% ...

  2. PPT鼠绘必须掌握的PPT绘图三大核心功能

    在PPT制作教程栏目中,陆陆续续的分享了一系列通过合并形状功能来绘图的教程,绘制安卓机器人.绘制西瓜.绘制鸡蛋.其实,合并形状功能只是PPT绘图的一部分,而真正想要掌握PPT鼠绘,仅仅是会使用合并形状 ...

  3. scanf("%[^\n]",str)

    题目地址 scanf()   遇到空格结束输入 可以用 scanf("%[^\n]" , str)   输入一行数据包括空格,直到遇到换行符 ' \n ' #include< ...

  4. Django的Mov逻辑的管理特色

    Django的MOV逻辑的管理特色 首先我们谈论到一个逻辑上的概念都从它的起点说起,在我看来mov的起点肯定就是Model了,那么Model有什莫特色呢 如果一个项目定义的Django那么Django ...

  5. 给nginx添加客户端的请求最大单文件限制

    在nginx.conf中添加如下. client_max_body_size 10m; #允许客户端请求的最大单文件字节数 client_body_buffer_size 128k; #缓冲区代理缓冲 ...

  6. 【Qt开发】Qt5.7串口开发

    QT5有专门的串口类:  QSerialPort:提供访问串口的功能  QSerialPortInfo:提供系统中存在的串口的信息  具体使用方法:  1.在pro文件中加入: QT += seria ...

  7. 向tabcontrol中添加form

    昨天花了一天的时间去找一个错误,关系是这样的,我添加一个tabcontrol就叫tc1好了,然后在tc1中再动态添加一个父窗体l叫form1,要把form1添加进tabcontrol就要先新建一个ta ...

  8. ASM下添加磁盘

    linux下asm磁盘扩容,此次扩容添加4块480G磁盘 第一步:multipath -ll : 查看多路径映射磁盘(两节点都做) 配置 /etc/multipath.conf文件,配置新加磁盘的al ...

  9. python 并发编程 进程池与线程池

    一 进程池与线程池 1.为什么需要进程池和线程池 基于多进程或多线程实现并发的套接字通信,然而这种实现方式的致命缺陷是: 服务端的程序运行在一台机器身上,一台机器性能是有极限的,不能无限开线程 服务的 ...

  10. Log的相关用法

    1.最好用静态final定义Log变量 private static final Log log = LogFactory.getLog(MyTest.class); 这样做的好处有三: 可以保证线程 ...