实现placeholder效果的方案汇总

 方案一:

摒弃原始属性placeholder,为input添加一个兄弟节点span,并为span设置绝对定位(父节点为position: relative;),使其位于input之上。html代码片段如下:

1
2
3
4
5
6
7
8
9
10
11
12

<li>
<div class="inputMD" style="position: relative;">
<input class="phInput" type="text" />
<span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">手机号码/邮箱地址</span>
</div>
</li>
<li>
<div class="inputMD" style="position: relative;">
<input class="phInput" type="password" />
<span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">请输入密码</span>
</div>
</li>

js代码如下(简单写了个函数,没写插件形式,呵呵):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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,为<input>添加一个属性phText="手机号码/邮箱地址"。默认状态下,value值为提示文本并且颜色为灰色;<input>获得焦点时,若value值等于phText属性值,则value值置空;<input>失去焦点时,若value值为空,则value值为提示文本。js代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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类型的<input>,而且<input>获得焦点时的提示文本消失(value值等于phText属性值时),这一点与原始的placeholder属性不同。

另外,也可以把phText属性改为placeholder属性,支持的浏览器呈现原始效果,不支持的浏览器通过js判断{'placeholder' in document.createElement('input')}调用方案二中的函数。此折中方案也有其缺点,各浏览器呈现的效果不完全一样。

方案三:

为不支持placeholder的浏览器写一个方法,首先把placeholder值赋给<input>并且颜色置为灰色,然后<input>获得焦点时判断value值等于placeholder值的话,把光标移至最前面(this.createTextRange和this.setSelectionRange)。当发生输入操作时,先把value值置为空,然后再接收输入值。另外,对于<input type="password">要为其新增一个<input type="text">用来显示提示文本,当发生输入操作时,需要把<input type="text">隐藏,然后把<input type="password">显示出来并让其获得焦点。此方案也有一些小缺陷,那就是当用鼠标右键粘贴时会出现bug。

总体上来讲,几种方案各有优缺点。登录页面我更倾向于使用方案一,呈现效果完全一致,仅仅是增加个新标签也不算麻烦。后台form表单和前台搜索页面更倾向于方案二,简单有效,只是在获得焦点时提示文本消失。

时间: 2024-09-12 07:20:58

实现placeholder效果的方案汇总的相关文章

实现placeholder效果的方案汇总_jquery

placeholder是html5<input>的一个属性,它提供可描述输入字段预期值的提示信息(hint), 该提示会在输入字段为空时显示.高端浏览器支持此属性(ie10/11在获得焦点时文字消失),ie6/7/8/9则不支持.为了兼容各主流浏览器并使其呈现效果保持一致,以下三套方案仅供参考. 方案一: 摒弃原始属性placeholder,为input添加一个兄弟节点span,并为span设置绝对定位(父节点为position: relative;),使其位于input之上.html代码片段

jQuery实现的placeholder效果完整实例_jquery

本文实例讲述了jQuery实现的placeholder效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

两种方法基于jQuery实现IE浏览器兼容placeholder效果

 placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m).Firefox( v21.0 ).360安全( v6.3 极速模式 )中,输入栏获得焦点后,提示文字并不消失,如图( Chrome ): 获得焦点前: 获得焦点时: 偏偏IE11要搞点特殊: 获得焦点前: 获得焦点时: 也就是说获得焦点时提示的文字会消失. 非现代浏览器( 例如 IE6-IE9 )是不支持p

jQuery实现HTML5 placeholder效果实例_jquery

你一定知道 HTML5新增的 placeholder 属性吧?不知道的也没关系.输入框有默认文本是,常需要这样一个效果,点击让默认文本消失,失去焦点后让默认文本显示. 今天分享一段jQuery代码,模拟 placeholder 效果. Javascript代码: 复制代码 代码如下: function placeHolder(event){   var self = $(this), selfDataValue = self.attr("data-value"), selfValue

IE下支持文本框和密码框placeholder效果的JQuery插件分享_jquery

很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框. placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失. 下载地址:http://xiazai.jb51.net/201501/other/placeholderfriend.rar 实现代码如下: 复制代码 代码如下: (function($) {   /**    * 没有开花

PPT文字动画方案汇总

  PPT文字动画的设计直接音影响着读者的感官效应,所以在汇报中的PPT不仅需要好的PPT模板,更要细化到其中文字的动画效果,下面推荐几种文字动画方案. PPT标题的文字动画:标题文字动画一般非常简洁,设置基本就是擦除或是上升下降,方向可自定,封面一般需要一个有视觉冲击力的图片,所以文字动画不推荐多做文章. 内容页标题文字动画: 标题文字的动画一般做左侧切入动画,同一标题在下一页出现的时候,要删除动画,表示还是这一标题下的内容,以免误导读者. 正文段落文字动画:正文文字动画一般做擦除动画,一行文

两种方法基于jQuery实现IE浏览器兼容placeholder效果_jquery

placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m).Firefox( v21.0 ).360安全( v6.3 极速模式 )中,输入栏获得焦点后,提示文字并不消失,如图( Chrome ): 获得焦点前: 获得焦点时: 偏偏IE11要搞点特殊: 获得焦点前: 获得焦点时: 也就是说获得焦点时提示的文字会消失. 非现代浏览器( 例如 IE6-IE9 )是不支持pl

ActiveMQ私有云、公有云以及Docker环境高可用集群方案汇总

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://dgd2010.blog.51cto.com/1539422/1749983 ActiveMQ软件概述 ActiveMQ提供消息队列服务. ActiveMQ高可用原理 ActiveMQ高可用由三部分组成. 1.ActiveMQ的master-slave 两个运行的ActiveMQ instance如果同时使用一套持久化存储,那么这两个ActiveMQ instance就会构成ma

解决前端跨域问题方案汇总_javascript技巧

1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b