跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder)
案例:整搜索框,需要默认占位符为“请输入关键词”,获取焦点时,占位符消失或不可用(不影响正常输入),丢失焦点后,若用户无内容输入,占位符继续出现,继续占位。这种代码我想前端们已经很容易就写出来了吧,现在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)的更多相关文章
- 跨浏览器实现placeholder效果的jQuery插件
曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...
- 跨浏览器的placeholder – 原生JS版
转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提 ...
- 自实现jQuery版分页插件
本篇博客的分页插件是在2017-11-10 的一篇博客的基础上改造的(原博客地址:原生js版分页插件),主要是优化了分页按钮的排列和显示样式,取消首页和末页的箭头按钮,改为数字按钮,并始终把它们分别固 ...
- 兼容IE浏览器的placeholder【超不错】
jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、
脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...
- jQuery常用特效插件汇总
jquery的CDN引用及下载地址 http://www.bootcdn.cn/jquery/ 1:semantictabs.js可以简单地制作Tabs菜单2:tabBox.js可以非常简单方便地 ...
- 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- 8 个最好的 jQuery 树形 Tree 插件
由于其拥有庞大,实用的插件库,使得 jQuery 变得越来越流行.今天将介绍一些最好的 jQuery 树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的 jQuery 插件,它将一个无序 ...
- 15款最好的 jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
随机推荐
- 我的 Sublime Text 2 笔记
作为aptana死忠粉的我,最近由于工作需要最近开始使用sublime,初次使用,就被其秒开的启动速度,简洁的界面设计,无干扰的信息提示所这幅. 俗话说,工欲善其事必先利其器,作为码农,在开始编码之前 ...
- thinkphp5 学习笔记
一.开发规范: 二.API: 1.数据输出:新版的控制器输出采用 Response 类统一处理,而不是直接在控制器中进行输出,通过设置 default_return_type 就可以自动进行数据转换处 ...
- Java中获取指定日为星期几及其他日期操作
摘自:http://blog.csdn.net/cselmu9/article/details/8625530#t6 在开发中经常会使用到一些日期方面的操作,下面例子展示几个常用的操作. 1.取得指定 ...
- 吐槽下intellij idea 2018.3这个版本
众所周知Springboot的@Service,@Controller,@Component,@Repository,@Configuration都是能扫描的,这些标签功能有完全一致的也有有区别的此处 ...
- 树莓派.Qt.Creator安装方法
树莓派硬件: Raspberry Pi 3 B 树莓派系统: Linux version 4.9.59-v7+ (32位) Qt版本(x86版本--32位): 安装过程 可以查看软件仓库支持的版本: ...
- AnguarJS中链式的一种更合理写法
假设有这样的一个场景: 我们知道一个用户某次航班,抽象成一个departure,大致是: {userID : user.email,flightID : "UA_343223",d ...
- AngularJS中自定义有关一个表格的Directive
本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table> <thead> <tr> ...
- alpha to coverage
alpha to coverage 在游戏中,经常使用带有半透明信息纹理的多边形模型来模拟复杂的物体,例如,草.树叶.铁丝网等.如果使用真正的模型,一颗边缘参差不齐的小草可能就要消耗掉几百个多边形:然 ...
- (亲测解决)每次打开excel文件都会出现两个窗口,一个是空白的sheet1,另一个是自己的文档
版权声明:本文为博主原创文章,转载请注明出处! https://blog.csdn.net/sinat_34104446/article/details/80210424 一.问题描述每次打开Exce ...
- Shell脚本编程基础笔记一
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/8176137.html 一:脚本文件的创建.格式.运行 1:创建shell脚本 首先,要创建一个文件 touch ...