你的位置:快乐忆站 \ 前端 \ 文章正文

jQuery placeholder插件

案例:整搜索框,需要默认占位符为“请输入关键词”,获取焦点时,占位符消失或不可用(不影响正常输入),丢失焦点后,若用户无内容输入,占位符继续出现,继续占位。这种代码我想前端们已经很容易就写出来了吧,现在HTML5原生就有这个“placeholder”属性,效果与上边案例描述的一样(各支持的浏览器内部表现可能不一致,但是作用是一致的),那么这一属性该怎么优雅降级到支持所有现代浏览器呢?答案还是脚本即JavaScript。

上述案例的一个图例:

普通状态:

普通状态

获取焦点但未输入:

未输入

输入后:

输入后

注:获取焦点但未输入时的状态各浏览器表现有差异,但不影响功能。

下面是我自写的一个jQuery插件,我博客就在用,代码如下:

;(function ($) {
	$.fn.extend({
		placeholder : function () {
			if ("placeholder" in document.createElement("input")) {
				return this //如果原生支持placeholder属性,则返回对象本身
			} else {
				return this.each(function () {
					var _this = $(this);
					_this.val(_this.attr("placeholder")).focus(function () {
						if (_this.val() === _this.attr("placeholder")) {
							_this.val("")
						}
					}).blur(function () {
						if (_this.val().length === 0) {
							_this.val(_this.attr("placeholder"))
						}
					})
				})
			}
		}
	})
})(jQuery);

你可以通过脚本判断浏览器是否原生支持placeholder属性来动态加载这个脚本,代码如下:

if(!"placeholder" in document.createElement("input")){
	$.getScript("jquery.placeholder.js",function(){
		$("#keyword").placeholder();//让id=keyword的元素支持placeholder,换成你自己的选择器
	})
}

这样,高级浏览器就能调用原生方法,而不支持“placeholder”的浏览器就会通过脚本来模拟这一属性了,over!

鉴于此插件为本人的偷懒作品,并不适合所有情况,请暂停使用,这里推荐一个比较齐全的placeholder插件:https://github.com/mathiasbynens/jquery-placeholder,大家不妨用这个,靠谱些。

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 17#
    谢亮
    谢亮 Firefox 23.0 Windows 8 x64 Edition 2013-08-16 09:15 回复
    用过这样的, 但不好用, 如判断是否为空的时候就有问题, 每次要判断 if(val==""||val="placeholder"){},且如果搜跟placeholder一样的词的时候就有问题了
  2. 16#
    rambo
    rambo Google Chrome 24.0.1312.70 GNU/Linux 2013-03-27 17:11 回复
    真正的placeholder  不是当forcus的placeholder消失   而是输入字符的时候,才消失!
    小松
    小松 Google Chrome 26.0.1410.43 Windows 8 x64 Edition 2013-03-27 18:45 回复
    @rambo:不支持的浏览器只能这样模拟了,简单,当然,你要判断输入,也没问题,您写一个吧
    rambo
    rambo Google Chrome 24.0.1312.70 GNU/Linux 2013-03-28 09:20 回复
    @rambo:这个好写 但是 有一个很重要的问题 现在无法解决  想做这个必须要判断吧   是想以下 假如 placeholder='hello world'   而我就想输入hello world  这样判断 我们无法掌握啊  我现在做的就是 把其放入到一个数组 添加一个关键字
    小松
    小松 Google Chrome 26.0.1410.43 Windows 8 x64 Edition 2013-03-28 16:13 回复
    @rambo:能共享下你的组件吗?
  3. 15#
    香港淘宝返利
    香港淘宝返利 Maxthon 3.0 Windows 7 x64 Edition 2012-12-03 23:57 回复
    牛擦啊~
    小松
    小松 Google Chrome 25.0.1323.1 Mac OS X 10.8.2 2012-12-04 21:28 回复
    @香港淘宝返利:擦啊
  4. 14#
    boobo
    boobo Google Chrome 17.0.963.84 Windows 7 2012-09-01 19:55 回复
       对话框不框 不能使用
    placeholder
    placeholder Google Chrome 22.0.1215.0 Windows 7 x64 Edition 2012-11-14 09:35 回复
    @boobo:关键是密码框如何处理,考虑了吗?
    小松
    小松 Google Chrome 23.0.1271.64 Windows 8 x64 Edition 2012-11-14 12:29 回复
    @placeholder:这个真没考虑
  5. 13#
    。潇
    。潇 Google Chrome 20.0.1132.47 Mac OS X 10.7.4 2012-07-05 15:34 回复
    灰常不错。用上了。
    小松
    小松 Google Chrome 21.0.1180.15 Windows 8 x64 Edition 2012-07-06 09:09 回复
    @。潇:你的主机速度貌似很快啊
    。潇
    。潇 Google Chrome 20.0.1132.47 Mac OS X 10.7.4 2012-07-06 16:44 回复
    @小松:你的瀑布流自己写的哇?
    小松
    小松 Google Chrome 21.0.1180.15 Windows 8 x64 Edition 2012-07-06 18:24 回复
    @。潇:不是的,用的开源插件~
  6. 12#
    wmtimes
    wmtimes Google Chrome 18.0.1025.162 Windows 7 2012-04-23 01:47 回复
    许久没来换成这样子了啊。评论还真不好找
    小松
    小松 Google Chrome 18.0.1025.162 Windows 7 x64 Edition 2012-04-25 15:58 回复
    @wmtimes:不会吧,我觉得还行~
  7. 11#
    C度
    C度 Google Chrome 17.0.963.83 Windows 7 2012-04-08 17:09 回复
    这是干嘛用的啊?
    小松
    小松 Google Chrome 18.0.1025.151 Windows 8 x64 Edition 2012-04-09 09:18 回复
    @C度:没什么用,闲得蛋疼用的~
  8. 10#
    LL.CX
    LL.CX Firefox 11.0 Windows XP 2012-04-07 22:33 回复
    这个不错
    小松
    小松 Google Chrome 18.0.1025.162 Windows 8 x64 Edition 2012-04-26 20:52 回复
    @LL.CX:这个只是很小很小的一个插件~作用也很小很小~
  9. 9#
    琪琪
    琪琪 Internet Explorer 99.0 Windows 2000 2012-04-02 17:22 回复
    效果不错!
    小松
    小松 Google Chrome 18.0.1025.162 Windows 8 x64 Edition 2012-04-26 20:52 回复
    @琪琪:你这useragent被你改得真蛋疼!
    琪琪
    琪琪 Google Chrome 18.0.1025.162 Windows XP 2012-04-28 19:32 回复
    @小松:哈哈!IE 99.0,咱自己开发的!
    小松
    小松 Google Chrome 18.0.1025.162 Windows 7 x64 Edition 2012-04-28 22:07 回复
    @琪琪:NB了!膜拜中。。。
    琪琪
    琪琪 Safari 4.0.4 iPad iOS 3.2 2012-04-29 10:44 回复
    @小松:当然NB了
    小松
    小松 Google Chrome 18.0.1025.162 Windows 7 x64 Edition 2012-04-29 14:25 回复
    @琪琪:哈哈,应该是神马插件改的吧?
    琪琪
    琪琪 Google Chrome 18.0.1025.162 Windows XP 2012-04-29 17:42 回复
    @小松:Chrome的<User-Agent Switcher for Chrome>
    小松
    小松 Google Chrome 18.0.1025.162 Windows 7 x64 Edition 2012-04-29 17:55 回复
    @琪琪:不错的插件,糊弄人蛮好的~不懂得还被你吓一跳!
    琪琪
    琪琪 Google Chrome 18.0.1025.162 Windows XP 2012-04-29 17:59 回复
    @小松:呵呵,别吓死人就好~
    小松
    小松 Google Chrome 18.0.1025.162 Windows 7 x64 Edition 2012-04-29 19:56 回复
    @琪琪:这倒不会,我相信不懂得对这个也不感冒~懂的人也知道这是怎么一回事~
    琪琪
    琪琪 Google Chrome 18.0.1025.162 Windows XP 2012-04-30 10:50 回复
    @小松:埋错!
    小松
    小松 Google Chrome 18.0.1025.162 Windows 7 x64 Edition 2012-04-30 11:30 回复
    @琪琪:美眉上网还挺早啊~
    琪琪
    琪琪 Google Chrome 18.0.1025.162 Windows XP 2012-04-30 11:32 回复
    @小松:你也挺早的嘛!
    小松
    小松 Google Chrome 18.0.1025.162 Windows 7 x64 Edition 2012-04-30 13:06 回复
    @琪琪:我一般假期都是睡不着的
    琪琪
    琪琪 Google Chrome 18.0.1025.162 Windows XP 2012-04-30 20:37 回复
    @小松:我也是。
    小松
    小松 Google Chrome 18.0.1025.162 Windows 7 x64 Edition 2012-05-01 10:09 回复
    @琪琪:不寻常的小姑娘
    琪琪
    琪琪 Google Chrome 18.0.1025.162 Windows XP 2012-05-01 11:09 回复
    @小松:
    小松
    小松 Google Chrome 18.0.1025.162 Windows 7 x64 Edition 2012-05-01 11:24 回复
    @琪琪:
    琪琪
    琪琪 Maxthon 3.3.7.2000 Windows XP 2012-05-01 11:42 回复
    @小松:给个友链呗,顺便加我Q547221432.有件事。
    琪琪
    琪琪 Google Chrome 18.0.1025.162 Windows XP 2012-05-01 11:49 回复
    @小松:
    小松
    小松 Google Chrome 18.0.1025.168 Windows 7 x64 Edition 2012-05-01 11:49 回复
    @琪琪:可怕的cdn加速!不整了~友链我给你加上
    不支持密码框
    不支持密码框 Google Chrome 21.0.1180.11 Windows 8 x64 Edition 2012-08-29 13:36 回复
    @小松:hoho,有待完善,密码框用的情况最多
    小松
    小松 Google Chrome 23.0.1246.0 Windows 8 x64 Edition 2012-08-29 14:46 回复
    @不支持密码框:ok,晚上抽空完善下~
  10. 8#
    cuike
    cuike 360Safe Explorer Windows XP 2012-03-30 19:58 回复
    呃。。。你博客现在还有友情链接么,能再加回我的友情链接么,之前各种不给力,现在博客回复了。谢谢。
    小松
    小松 Google Chrome 18.0.1025.162 Windows 8 x64 Edition 2012-04-26 20:53 回复
    @cuike:还做的,之前一直忙,也没来得及回复
1 2

随机日志:

推荐日志:

彩色标签:

sitemap