方案一：
摒弃原始属性placeholder，为input添加一个兄弟节点span，并为span设置绝对定位（父节点为position: relative;），使其位于input之上。html代码片段如下：
手机号码/邮箱地址
请输入密码
js代码如下（简单写了个函数，没写插件形式，呵呵）：
function _placeholdertext(phinput, phtext) { //定义函数，传递2个参数——input输入框和text提示文本的id或者class var $input = $(phinput); var $text = $(phtext); $input.each(function() { //页面加载时遍历所有仿placeholder的input var _this = $(this); var _text = _this.siblings(phtext); if($.trim(_this.val()) == '') { _this.val(); _text.show(); } else { _text.hide(); } }); $text.on('click', function() { //点击提示信息，input获取焦点 $(this).siblings(phinput).focus(); }); $input.on('input propertychange blur', function() { //为input注册事件，value值改变（其实是属性发生变化）时以及失去焦点时判断value值是否为空 var _this = $(this); if(_this.val() == '') { _this.siblings(phtext).show(); } else { _this.siblings(phtext).hide(); } });}_placeholdertext('.phinput', '.phtext'); //调用函数
个人总结：方案一适用于登录页面，但对于后台form表单及前台的搜索页面不太适合，因为要增加新的提示文本标签，不太友好。
方案二：
同样摒弃原始属性placeholder，为添加一个属性phtext=手机号码/邮箱地址。默认状态下，value值为提示文本并且颜色为灰色；获得焦点时，若value值等于phtext属性值，则value值置空；失去焦点时，若value值为空，则value值为提示文本。js代码如下：
function inputjsdiy(obj, colortip, colortxt) { //定义函数，传递3个参数——dom对象、提示文本的颜色值、输入文本的颜色值 colortip = colortip || '#aaaaaa'; colortxt = colortxt || '#666666'; obj.each(function() { var _this = $(this); _this.css({color: colortip}); //输入框颜色默认置为提示文本的颜色值 if($.trim(_this.val()) == ) { //判断value值是否为空，若为空则value值赋值等于提示文本 _this.val(_this.attr(phtext)); } else if(_this.val() != _this.attr(phtext)) { _this.css({color: colortxt}); //正常的输入文本颜色值 } }); obj.on(focus, function() { //获取焦点时做判断 var _this = $(this); var value = _this.val(); if(value == _this.attr(phtext)) { _this.val(); } _this.css({color: colortxt}); }); obj.on(blur, function() { //失去焦点时做判断 var _this = $(this); var value = _this.val(); if($.trim(value) == ) { _this.val($(this).attr(phtext)).css({color: colortip}); } }); obj.parents(form).on(submit, function() { //提交表单时去除提示文本（把提示文本置空） obj.each(function() { var _this = $(this); if(_this.val() == _this.attr(phtext)) { _this.val(); } }); });}inputjsdiy($('.phinput'), '#aaa', '#666'); //调用函数
个人总结：方案二比较适合后台页面form表单及前台搜索页面，操作简单，无附加标签。缺点是不能用于password类型的，而且获得焦点时的提示文本消失（value值等于phtext属性值时），这一点与原始的placeholder属性不同。
另外，也可以把phtext属性改为placeholder属性，支持的浏览器呈现原始效果，不支持的浏览器通过js判断{'placeholder' in document.createelement('input')}调用方案二中的函数。此折中方案也有其缺点，各浏览器呈现的效果不完全一样。
方案三：
为不支持placeholder的浏览器写一个方法，首先把placeholder值赋给并且颜色置为灰色，然后获得焦点时判断value值等于placeholder值的话，把光标移至最前面（this.createtextrange和this.setselectionrange）。当发生输入操作时，先把value值置为空，然后再接收输入值。另外，对于要为其新增一个用来显示提示文本，当发生输入操作时，需要把隐藏，然后把显示出来并让其获得焦点。此方案也有一些小缺陷，那就是当用鼠标右键粘贴时会出现bug。
总体上来讲，几种方案各有优缺点。登录页面我更倾向于使用方案一，呈现效果完全一致，仅仅是增加个新标签也不算麻烦。后台form表单和前台搜索页面更倾向于方案二，简单有效，只是在获得焦点时提示文本消失。
以上所述就是本文的全部内容了，希望大家能够喜欢。