案例:整搜索框,需要默认占位符为“请输入关键词”,获取焦点时,占位符消失或不可用(不影响正常输入),丢失焦点后,若用户无内容输入,占位符继续出现,继续占位。这种代码我想前端们已经很容易就写出来了吧,现在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)的更多相关文章

  1. 跨浏览器实现placeholder效果的jQuery插件

    曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...

  2. 跨浏览器的placeholder – 原生JS版

    转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提 ...

  3. 自实现jQuery版分页插件

    本篇博客的分页插件是在2017-11-10 的一篇博客的基础上改造的(原博客地址:原生js版分页插件),主要是优化了分页按钮的排列和显示样式,取消首页和末页的箭头按钮,改为数字按钮,并始终把它们分别固 ...

  4. 兼容IE浏览器的placeholder【超不错】

    jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...

  5. jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、

    脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...

  6. jQuery常用特效插件汇总

    jquery的CDN引用及下载地址 http://www.bootcdn.cn/jquery/   1:semantictabs.js可以简单地制作Tabs菜单2:tabBox.js可以非常简单方便地 ...

  7. 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  8. jQuery 网格布局插件

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  9. 8 个最好的 jQuery 树形 Tree 插件

    由于其拥有庞大,实用的插件库,使得 jQuery 变得越来越流行.今天将介绍一些最好的 jQuery 树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的 jQuery 插件,它将一个无序 ...

  10. 15款最好的 jQuery 网格布局插件

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

随机推荐

  1. 前端性能优化 —— 减少HTTP请求

    简要:对于影响页面呈选 的因素有3个地方:服务器连接数据库并计算返回数据 , http请求以及数据(文件)经过网络传输 , 文件在浏览器中计算渲染呈选: 其中大约80%的时间都耗在了http请求上,所 ...

  2. Ansible修改自定义端口和登录用户

    如下所示: [servers] host1 ansible_ssh_host=192.0.2.1 ansible_ssh_port=5555 ansible_ssh_user="user&q ...

  3. 画时序图工具TimingDesigner 9.2 安装指导

    画时序图工具TimingDesigner 9.2 安装指导 先上文件下载链接:http://bbs.eetop.cn/viewthread.php?tid=250446&;highlight= ...

  4. AngularJS中介者模式实例

    在任何应用程序中,中介者模式随处可见. → 有一个事件源,触发事件,传递参数→ 中介者记下这个事件,向外界广播,并带上参赛→ 有一个地方侦听中介者事件,一旦事件源触发事件,就从中介者手里获取事件相关参 ...

  5. boost.property_tree解析xml的帮助类以及中文解析问题的解决(转)

    boost.property_tree可以用来解析xml和json文件,我主要用它来解析xml文件,它内部封装了号称最快的xml解析器rapid_xml,其解析效率还是很好的.但是在使用过程中却发现各 ...

  6. 全景分割pipeline搭建

    全景分割pipeline搭建 整体方法使用语义分割和实例分割结果,融合标签得到全景分割结果: 数据集使用:panoptic_annotations_trainval2017和cityscapes; p ...

  7. Array and Linkedlist区别与操作的时间复杂度(转载)

    转载自:http://blog.csdn.net/tm_wb/article/details/6319146 数组链表堆栈和队列 数组链表堆栈和队列是最基本的数据结构,任何程序都会涉及到其中的一种或多 ...

  8. Spark:java api读取hdfs目录下多个文件

    需求: 由于一个大文件,在spark中加载性能比较差.于是把一个大文件拆分为多个小文件后上传到hdfs,然而在spark2.2下如何加载某个目录下多个文件呢? public class SparkJo ...

  9. Dubbo的使用入门

    一.包引入 1.父模块pom.xml中加入依赖: <!-- dubbo --> <dependency> <groupId>com.alibaba.boot< ...

  10. SQL Server为字段添加默认值

    SQL Server为字段添加默认值 if not exists ( select * from sys.columns as c join sys.objects as o on c.default ...