跨浏览器的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),布布扣,bubuko.com

时间: 2024-10-25 07:30:05

跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder)的相关文章

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

曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/javascript" src="<%=basePath%>/login.js" ></script> 2.页面初始化代码 <script type="text/javascript"> //input提示信息 效果插件 针对

实现跨浏览器CSS3 transitions效果的jQuery插件

tram.js是一款实现跨浏览器CSS3 transitions效果的jQuery插件.tram.js旨在提高CSS3 transition的性能和灵活性,并通过jQuery来定义它们.tram.js提供强大的API来实现auto-stopping.sequencing和跨浏览器等功能. 当该jquery插件首次加载时,它将使用特性检测来判断浏览器是否支持CSS transitions.如果浏览器支持,Tram将管理样式并有浏览器来执行CSS3动画.如果浏览器不支持,Tram将使用自己的补间动画

跨浏览器的placeholder – 原生JS版

转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提供对输入字段预期值的提示信息,input为空且未获得焦点时显示,获得焦点时消失,非常实用.目前,大部分现代浏览器都对placeholder属性提供了支持,IE10也是支持的.如果需要使IE6~IE9等浏览器支持placeholder,只有借助js了. 在这些不支持原生placeholder属性的浏览

jQuery高性能跨浏览器全屏幻灯片特效插件

Nex是一款效果炫酷的.高性能的跨浏览器全屏幻灯片特效jQuery插件.该幻灯片插件允许你嵌入图片.视频,甚至是谷歌地图.该幻灯片提供了7组共34种不同的效果,可以使你适用于任何场景下使用. 它的特点有: 幻灯片外观可以自定义 优化速度 支持移动触摸设备 支持键盘导航 支持选择各种Pattern 对SEO优化十分友好 10种类型效果:Fade, Slide [left,right,top,bottom], Zoom, Skew, Rotate, Random, None 5种颜色主题:ameth

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

脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面设计 媒体动画 操作系统 网站运营 网络安全 YUI.Ext相关 prototype jquery dojo json lib_js js面向对象 extjs Mootools Seajs 其它 特色栏目: vbscript 正则表达式 javascript 批处理 服务器软件 素材下载 低价出售流

viewer.js--一个强大的jQuery图像查看插件

Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 查看演示      立即下载 部分插件网站提供的下载包有缺陷,不能兼容ie8-10.错误表现为放大的图片没有取到url,导致图片不显示.所以此链接为 viewer的官方演示,及github上的开源代码. 使用方法: 1.引入css和js <link rel="stylesheet" href="css/vie

jQuery 网格布局插件

如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 jQuery 网格布局插件(jQuery Grid Plugins),它可以帮助你在创建网格布局项目时大大缩短开发时间. 1. Freewall Freewall 是一个跨浏览器和响应式的 jQuery 插件,以帮助您创建多种类型的网格布局:灵活的布局,图像布局,嵌套网格,流体网格,Metro 风格

跨浏览器的placehold

如何实现跨浏览器的placeholder效果呢? 先看下效果 js代码如下: $('#username').placeholder({ word: '用户名', color: '#ddd', normalFontColor: '#f00', maxLen: 4, minLen: 2, errorBorderClass: 'errorBorder', keyup_callback: function () { console.log('keyup_callback'); } }); $('#pas

实现跨浏览器html5表单验证

div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: right; clear: right; } .clearfix:after{ content: ""; display:block; clear: both; } .figcaption{ clear: both; color: #999; padding-top: 10px; text