资讯专栏INFORMATION COLUMN

解决input 中placeholder的那些神坑

bigdevil_s / 885人阅读

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

</>复制代码

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

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

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

</>复制代码

  1. 解决方案一:jquery实现

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

</>复制代码

  1. $(#selector).placeholder();(selector泛指css 的 id选择器)

当文本框type=password时,引用此placeholder方案会使暗文密码变成明文密码

如果input文本框使用了bootstrap 行高会高一点,要修改placeholder内的文字样式 可在placeholder.js里中添加style属性如:

</>复制代码

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


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

</>复制代码

  1. 解决方案二: js/jQuery实现

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

</>复制代码

  1. (function (win) {
  2. win.isPlaceholer = function () {
  3. var input = document.createElement("input");
  4. return "placeholder" in input;
  5. };
  6. win.placeholder = function () {
  7. if (!isPlaceholer()) {
  8. var Placeholder =function (obj) {
  9. this.input = obj;
  10. var te = obj.getAttribute("placeholder");
  11. this.label = document.createElement("label");
  12. this.label.innerHTML = te;
  13. this.label.id = obj.id + "Label";
  14. this.label.style.cssText = "position:absolute; text-indent:4px;color:#999999; font-size:14px;";
  15. if (obj.value !== "") {
  16. this.label.style.display = "none";
  17. }
  18. this.init();
  19. };
  20. Placeholder.prototype = {
  21. getxy: function (obj) {
  22. var left, top;
  23. if (document.documentElement.getBoundingClientRect) {
  24. var html = document.documentElement,
  25. body = document.body,
  26. pos = obj.getBoundingClientRect(),
  27. st = html.scrollTop || body.scrollTop,
  28. sl = html.scrollLeft || body.scrollLeft,
  29. ct = html.clientTop || body.clientTop,
  30. cl = html.clientLeft || body.clientLeft;
  31. left = pos.left + sl - cl;
  32. top = pos.top + st - ct;
  33. } else {
  34. while (obj) {
  35. left += obj.offsetLeft;
  36. top += obj.offsetTop;
  37. obj = obj.offsetParent;
  38. }
  39. }
  40. return {
  41. left: left,
  42. top: top
  43. };
  44. },
  45. getwh: function (obj) {
  46. return {
  47. w: obj.offsetWidth,
  48. h: obj.offsetHeight
  49. };
  50. },
  51. setStyles: function (obj, styles) {
  52. for (var p in styles) {
  53. obj.style[p] = styles[p] + "px";
  54. }
  55. },
  56. init: function () {
  57. var label = this.label,
  58. input = this.input,
  59. getXY = this.getxy,
  60. xy = this.getxy(input),
  61. wh = this.getwh(input);
  62. this.setStyles(label, { "width": wh.w, "height": wh.h, "lineHeight": 40, "left": xy.left + 8, "top": xy.top });
  63. document.body.appendChild(label);
  64. label.onclick = function () {
  65. this.style.display = "none";
  66. input.focus();
  67. };
  68. input.onfocus = function () {
  69. label.style.display = "none";
  70. };
  71. input.onblur = function () {
  72. if (this.value === "") {
  73. label.style.display = "block";
  74. }
  75. };
  76. if (window.attachEvent) {
  77. window.attachEvent("onresize", function () {
  78. var xy = getXY(input);
  79. Placeholder.prototype.setStyles(label, { "left": xy.left + 8, "top": xy.top });
  80. });
  81. } else {
  82. window.addEventListener("resize", function () {
  83. var xy = getXY(input);
  84. Placeholder.prototype.setStyles(label, { "left": xy.left + 8, "top": xy.top });
  85. }, false);
  86. }
  87. }
  88. };
  89. var inpColl = $("#Box input:visible");//这里是页面上要添加placeholder支持的input
  90. //var inpColl = document.getElementsByTagName("input"),
  91. var textColl = document.getElementsByTagName("textarea");//这里是页面上要添加placeholder支持的textarea
  92. //var lableArr = $("#Box lable");
  93. var toArray = function (coll) {
  94. for (var i = 0, a = [], len = coll.length; i < len; i++) {
  95. a[i] = coll[i];
  96. }
  97. return a;
  98. };
  99. var inpArr = toArray(inpColl),
  100. textArr = toArray(textColl),
  101. placeholderArr = inpArr.concat(textArr);
  102. for (var i = 0; i < placeholderArr.length; i++) {
  103. if (placeholderArr[i].getAttribute("placeholder") !== null) {
  104. new Placeholder(placeholderArr[i]);
  105. }
  106. }
  107. }
  108. };
  109. }(window));
二、解决placeholder在ios上的小坑

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

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

三、让 placeholder 换行

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

</>复制代码

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

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

</>复制代码

  1. ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  2. color: #909;
  3. }
  4. :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  5. color: #909;
  6. }
  7. ::-moz-placeholder { /* Mozilla Firefox 19+ */
  8. color: #909;
  9. }
  10. :-ms-input-placeholder { /* Internet Explorer 10-11 */
  11. color: #909;
  12. }

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


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53057.html

相关文章

  • 解决input placeholder那些神坑

    摘要:昨天后台小哥哥提到无法显示问题,我这边总结一下,顺便写个小文章分享给大家。。 **昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家。。** ============================================== 一、解决ie9以下input 无placeholder问题 解决方案一:jquery实现 当浏览器不支持...

    chnmagnus 评论0 收藏0
  • 解决input placeholder那些神坑

    摘要:昨天后台小哥哥提到无法显示问题,我这边总结一下,顺便写个小文章分享给大家。。 **昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家。。** ============================================== 一、解决ie9以下input 无placeholder问题 解决方案一:jquery实现 当浏览器不支持...

    ingood 评论0 收藏0
  • 前端遇到那些技术难点

    摘要:目前主流的屏幕或者。产生原因在中,手指按住屏幕上下拖动,会触发事件。或者可以加入我的开发交流群相互学习,我们会有专业的技术答疑解惑如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点不胜感激 移动端兼容css篇移动端的 1px问题描述:1px 的边框。在高清屏下,移动端的 1px 会很粗。产生原因:首先先要了解一个...

    番茄西红柿 评论0 收藏2637
  • 小程序开发那些小坑

    摘要:解决方法用组件替换组件,用微信小程序的实现点击切换效果除此之外,在中也不能使用组件。接口更改问题微信小程序最近被吐槽最多的一个更改,就是用户使用开发和体验版时不会弹出授权,正式版不受影响。 最近专门做小程序开发中,跟大家分享下遇到那些不得不处理的小坑,欢迎指正 1.小程序用 WxParse 在手机上不能正确解析 html 代码并显示 解决办法: 这个是 wxparse 代码的一个...

    CODING 评论0 收藏0
  • 小程序开发那些小坑

    摘要:解决方法用组件替换组件,用微信小程序的实现点击切换效果除此之外,在中也不能使用组件。接口更改问题微信小程序最近被吐槽最多的一个更改,就是用户使用开发和体验版时不会弹出授权,正式版不受影响。 最近专门做小程序开发中,跟大家分享下遇到那些不得不处理的小坑,欢迎指正 1.小程序用 WxParse 在手机上不能正确解析 html 代码并显示 解决办法: 这个是 wxparse 代码的一个...

    jerryloveemily 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<