占位符效应计划摘要

占位符是HTML5的一个属性，它提供了提示信息（提示）来描述输入域的期望值，这提示会显示在输入字段是空的。高端的浏览器都支持此属性（IE10 / 11消失的时候重点），和IE6 / 7 / 8 9不支持它。为了兼容主流浏览器，使结果一致，以下三套方案仅供参考。

方案1：

放弃原来的属性占位符，将兄弟节点跨度添加到输入中，并设置跨度（父节点是位置：相对位置）的绝对位置，使其位于输入端：
移动电话号码/邮箱地址
请输入密码

js代码如下（简单地写一个函数，不写一个插件窗体，呵呵）：
功能_placeholdertext（phinput，phtext）{ / /定义功能，通过2个参数：输入文本的文本输入框的id或class
输入= $（var $ phinput）；
VaR（phtext文本=美元美元）；
input.each美元（函数（）{ / /页面加载遍历所有模仿占位符输入
_this = $（this）功；
无功_text = _this.siblings（phtext）；
如果（美元。修剪（（_this。Val））= = {）
_this.val（）；
_text.show（）；
{人}
_text.hide（）；
}
}）；
text.on美元（听到咔哒声，功能）{ / /（点击信息，输入得到焦点
$（这），兄弟姐妹（phinput）集中（）；
}）；
input.on美元（输入propertychange blur'function（输入）{ / /登记的事件，该值变化（实际上属性变化）和失去焦点时判断值是空的
_this = $（this）功；
如果（_this。Val）= = {（' '）
_this.siblings（phtext）显示（）；
{人}
_this.siblings（phtext）隐藏（）；
}
}）；
}

_placeholdertext（'。phinput '、'。phtext '）； / /呼叫功能

个人总结：程序I适用于登录页面，但它不适合表单表单和前台的搜索表单，因为添加新的提示文本标签不是很友好。

方案二：

原始属性，占位符，也放弃了将属性添加phtext =电话号码/邮箱地址。在缺省状态的值是提示文本和颜色是灰色的。当焦点了，如果值等于phtext属性值，该值是空的。如果焦点丢失时，值为空，则值为提示文本：
功能inputjsdiy（obj，色条，colortxt）{ / /定义功能，通过3个参数：DOM对象，提示文字的颜色值，输入的文本的颜色值
色条=色条的# aaaaaa| |；
colortxt = colortxt ' 666666 ' | | #；
obj.each（函数（）{（）
_this = $（this）功；
_this.css（{颜色：色条}）； / /输入框设置为默认颜色，文字的颜色值
如果（美元。修剪（（_this。Val））= =）{ / /价值判断是空的，如果空值等于提示文本
_this.val（_this.attr（phtext ））；
} else if（_this.val（）！= _this.attr（phtext ））{
_this.css（{颜色：colortxt }）； / /输入文字颜色正常值
}
}）；
Obj.on（热点），功能（{ / /获得焦点来做判断
_this = $（this）功；
VaR值= _this.val（）；
如果（值= _this.attr（phtext ））{
_this.val（）；
}
_this.css ({color: colorTxt});
}）；
Obj.on（模糊），功能（{ / /失去焦点时做出判断
_this = $（this）功；
VaR值= _this.val（）；
如果（修剪（值）= ）
_this.val（$（this）。Attr（phtext ）），Css（{颜色：色条}）；
}
}）；
obj.parents（形式），（提交），功能（{ / /当表单被提交时删除的提示文本（文本空白）
obj.each（函数（）{（）
_this = $（this）功；
如果（（_this。Val）= _this.attr（phtext ））{
_this.val（）；
}
}）；
}）；
}

inputjsdiy（$（'。phinput），# AAA、# 666 '）； / /呼叫功能

个人简介：方案二更适合后台页面形式和前面的搜索页面，操作简单，无需额外的标签。缺点是不能用于密码类型，当焦点文本消失，价值的价值等于phtext属性的值，这是不同于原来的占位符属性。

In addition, you can also change the phText attribute to the placeholder attribute. 支持的浏览器显示了最初的效果。浏览器不支持调用{ 'placeholder'in document.createelement功能（输入的）}的JS。这种妥协也有它的缺点，和浏览器的影响不完全相同。

方案三：

写一个浏览器不支持占位符方法占位符的值赋给一个彩色和灰度，然后获得焦点时，价值判断的价值等于占位符的值，移动光标到前面（this.createtextrange这。setselectionrange）。当输入操作时，的值是设置为空，然后输入值是接收。此外，添加另一个文本显示提示文本，当输入操作时，它需要隐藏和显示它并让它获得焦点。这个方案也有一些小的缺陷，那就是，当你用鼠标右键粘贴错误。

一般来说，几种方案各有优缺点，我更倾向于使用程序一，结果是一样的。添加一个新的标签并不麻烦，后台表单和首页搜索页面更倾向于两个程序，简单有效，只在提示焦点时提示文本消失。

以上是本文的全部内容，希望大家能喜欢。