跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder) 兼容ie8浏览器

转载 2016年08月29日 10:31:28

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

下面我们就使用 Jquery 的 enplaceholder 插件来实现这个效果.

效果演示界面 http://www.ifrans.cn/demo/enplaceholder.html

用法:

首先在head中分别引入jQuery及本插件

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="jquery.enplaceholder.js"></script>

然后就可以调用鸟

//通过value模拟placeholder

$('input').placeholder();

//通过插入span元素模拟placeholder

$('input').placeholder({isUseSpan:true});

转载:梨花驿路

跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder,实现默认显示表单元素的焦点值)

最近封装了一个jQuery插件,暂时命名为EnPlaceholder,和上篇文章《跨浏览器的placeholder – 原生JS版》要解决的问题一样,也是为了让更多的浏览器支持placeholder。...
  • u012581409
  • u012581409
  • 2014年09月24日 12:48
  • 732

placeholder—Jquery插件placeholder的使用方法

闲的蛋疼,演示一下Jquery插件placeholder的使用方法,借助该插件可以轻松实现HTML5中placeholder特效:...
  • wangshuxuncom
  • wangshuxuncom
  • 2014年07月12日 11:37
  • 7728

兼容IE8的jQuery旋转木马幻灯片插件

  • 2017年07月10日 09:25
  • 266KB
  • 下载

支持30+种类型幻灯片|轮播图|旋转木马的强大jQuery插件

插件地址:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201512152906.html 简要教程 jssor slider是...
  • yzbben
  • yzbben
  • 2016年08月16日 09:35
  • 810

旋转木马banner和圆形旋转特效菜单

  • 2017年08月09日 09:58
  • 50MB
  • 下载

IE8、9、10下图片旋转

这里两天要实现一个功能,图片左右旋转 在网上找了各种zh
  • tang745163962
  • tang745163962
  • 2014年05月30日 14:59
  • 8845

为 IE7、IE8 增加圆角支持的 jQuery 插件:jQuery Corner

圆角在网页设计中比较常见,但是却让前端很苦恼。在过去的时候,做一个圆角效果往往需要将圆角图片切出,然后通过背景等实现效果。而在现在,CSS3 中有一个 border-radius 属性即可生成各种尺寸...
  • u014209975
  • u014209975
  • 2015年01月07日 09:41
  • 826

支持30+种类型幻灯片|轮播图|旋转木马的强大jQuery插件

插件地址:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201512152906.html 简要教程 jssor slider是...
  • yzbben
  • yzbben
  • 2016年08月16日 09:35
  • 810

jquery分页插件(简洁、兼容、类似浏览器搜索分页效果)

开始用网上下载的分页插件,效果h
  • wufengui1315
  • wufengui1315
  • 2014年04月14日 17:56
  • 1921

ie8以下版本(包括ie8)的浏览器不支持html5标签属性解决方案(Modernizr 2.6.2插件的使用)

ie8以下版本(包括ie8)的浏览器不支持html5标签属性解决方案(Modernizr 2.6.2插件的使用)...
  • zyx13859002783
  • zyx13859002783
  • 2014年08月12日 09:30
  • 25534
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder) 兼容ie8浏览器
举报原因:
原因补充:

(最多只允许输入30个字)