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

    Python函数式编程 函数式编程可以使代码更加简洁,易于理解.Python提供的常见函数式编程方法如下: map(函数,可迭代式)映射函数 filter(函数,可迭代式)过滤函数 reduce(函数 ...

  2. Vs2017 控制台 中文输出是乱码的问题解决

    下午直接用vs写的控制台的东西,然后发现控制台输出的中文是乱码,于是就百度了下.同样的是,百度上很多的答案.我就说下我解决的过程.先上图 第一种方案:有可能是控制台的问题.若是控制台的问题,则与VS无 ...

  3. window 10系统怎样手动更改电脑的时间

    win10系统的电脑显示时间默认的是自动网络校时,也就是电脑的时间跟网络时间同步,那么win10系统怎样手动更改电脑时间呢? 点击电脑左下方的win图标,找到菜单里的[设置] 点击菜单里的[设置],弹 ...

  4. Spring中 @Autowired标签与 @Resource标签 的区别(转)

    Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...

  5. Java学习(一)--面向对象(一)

    面向对象的思想一直指导者我们软件的分析.设计与开发.java语言是一种面向对象的语言.在学习java之前,先回想一以下向过程和面向对象. 一面向过程 面向过程主张按功能来划分系统需求.每一个功能都负责 ...

  6. quartus II输入原理图及仿真步骤

    在Quartus II中输入原理图以及实现仿真是学习基本数字电路的好方法.下面以一个基本的D锁存器为例,在quartus II 13.0中一步一步来实现原理图输入以及仿真过程. 1,创建工程 指定工程 ...

  7. 隐藏控件--HiddenField控件

    HiddenField控件百度查的结果(帮助大家对比理解): HiddenField控件顾名思义就是隐藏输入框的服务器控件,它能让你保存那些不需要显示在页面上的且对安全性要求不高的数据.也许这个时候应 ...

  8. 如何自动播放光盘、解决win7电脑不能播放光盘

    如何设置光盘自动播放.允许光盘自动运行呢? 在使用电脑光驱播放光盘文件的时候,经常出现的一个问题是,光驱不能自动播放光盘,但是打开光盘的文件手动操作没有任何问题,这给使用造成了很多麻烦.那么,如何让光 ...

  9. python 进程池pool简单使用

    平常会经常用到多进程,可以用进程池pool来进行自动控制进程,下面介绍一下pool的简单使用. 需要主动是,在Windows上要想使用进程模块,就必须把有关进程的代码写if __name__ == ‘ ...

  10. Java高编译低运行错误(ConcurrentHashMap.keySet)

    Java高编译低运行错误(ConcurrentHashMap.keySet) 调了一天: https://www.jianshu.com/p/f4996b1ccf2f