jquery placeholder
/*
* @author ambar
* html5 placeholder pollfill
* - 使用绝对定位内嵌层
* - 也适用于密码域
* 目标浏览器: IE 6~9, FF 3.5 */
(function ($) {
var attr = 'nullText'; $.fn.placeholder = function (options) {
return this.each(function () {
var $input = $(this);
if (typeof options === 'string') {
options = { text: options };
} var opt = $.extend({
text: '',
style: {}, namespace: 'nullText',
hideOnFocus: false
}, options || {}); if (!opt.text) {
opt.text = $input.attr(attr);
} var width = $input.width(); var show = function () { $layer.show(); };
var hide = function () { $layer.hide(); };
var is_empty = function () { return !$input.val(); };
var check = function () { is_empty() ? show() : hide(); }; var position = function () {
var pos = $input.position();
if (!opt.hideOnFocus) {
// 按鍵隱藏的情况,需要移動光標两像素
pos.left += 2;
}
pos.top += 3;
$layer.css(pos);
}; var layer_style = {
color: 'gray',
cursor: 'text',
textAlign: 'left',
position: 'absolute',
textShadow: 'none',
fontSize: $input.css('fontSize'),
fontFamily: $input.css('fontFamily'),
display: is_empty() ? 'block' : 'none',
zIndex: '1000',
top: '3px'
}; var package_style = { position: 'relative' }; // create
var layer_props = {
text: opt.text,
width: width,
height: 'auto'
}; // 确保只绑定一次
var ns = '.' + opt.namespace, $layer = $input.data('layer' + ns);
if (!$layer) {
$layer = $('<label>', layer_props)
.attr('for', $input.attr('id'));
$input.data('layer' + ns, $layer);
} var $package = $("<div></div>").css(package_style);
$input.parent().append($package);
$package.append($layer).append($input); // activate
$layer
.css($.extend(layer_style, opt.style))
.unbind('click' + ns)
.bind('click' + ns, function () {
opt.hideOnFocus && hide();
$input.focus();
});
$input
.unbind(ns)
.bind('blur' + ns, check); if (opt.hideOnFocus) {
$input.bind('focus' + ns, hide);
} else {
$input.bind('keypress keydown' + ns, function (e) {
var key = e.keyCode;
if (e.charCode || (key >= 65 && key <= 90)) {
hide();
}
})
.bind('keyup' + ns, check);
} // 由于 ie 记住密码的特性,需要监听值改变
// ie9 不支持 jq bind 此事件
$input.get(0).onpropertychange = check; position();
check();
});
}; })(jQuery); //调用方法
$("[nullText]").placeholder();
jquery placeholder的更多相关文章
- JQuery Placeholder - Input提示信息
JQuery Placeholder Placeholder属性是HTML5为Input添加的,在Input上提供一个占位符,文字形式展示输入文字预期值的提示信息. 如: 需要使用:placehold ...
- jquery.placeholder.js的使用
最近做东西用到placeholder这个属性,可是这个属性在低版本的IE或者QQ浏览器等这些浏览器上这个属性不能生效,后来在网上查了下,发现了jquery的一个插件jquery.placeholder ...
- jquery.placeholder.min.js让吃屎的IE浏览器支持placeholder去吧
描述:现在都是HTML5时代了,所有的浏览器都支持placeholder,唯独IE不支持.现在我们有了这款插件,IE下终于可以支持了! 图片展示: 兼容浏览器:IE6+/Firefox/Goog ...
- 【学习】jquery.placeholder.js让IE浏览器支持html5的placeholder
type为text或password的input,其在实际应用时,往往有一个占位符,类似这样的: 在没有html5前,一般写成value,用js实现交互,文本框获得焦点时,提示文字消失,失去焦点时,文 ...
- jquery 小插件,完成“输入字段预期值的提示信息”,防html5 placeholder属性
前言:在很多时候,我们需要文本框中显示默认值,获取焦点时,文字框中就会清空给的值,当失去焦点时,如果没有值,继续显示默认的文字,如果有输入值,就显示输入的值.现在项目中需要用到这个地方的功能比较多,于 ...
- Jquery插件placeholder的用法
闲的蛋疼,演示一下Jquery插件placeholder的用法,借助该插件能够轻松实现HTML5中placeholder特效: 效果图: 实现代码: <%@ page language=&quo ...
- jQuery插件placeholder的使用方法
借助该插件可以轻松实现HTML5中placeholder特效: 实例代码如下: <script type="text/javascript" src="<%= ...
- 实用的placeholder插件,兼容IE下的placeholder,jquery插件
placeholder在IE下无法兼容 ,下面的插件很好的处理了这个问题,拿去不谢 /* * jQuery placeholder, fix for IE6,7,8,9 * @website itmy ...
- html5 placeholder ie 不兼容问题 解决方案
解决HTML5 placeholder的方案 来源: 时间:2013-09-05 20:06:49 阅读数:11375 分享到: 0 [导读] 使低版本浏览器支持Placeholder有很多方 ...
随机推荐
- 对dom的理解
js对dom的操作可以理解为: 增.删.改.查 获取对象:查 对象操作:增,修,删 内容操作:innerHTML,innerText等 事件操作:mouse,key 样式操作:id,tag,class ...
- Html定位精要
Html定位基础 Html的布局是文档流模型,块元素独占一行,内联元素并列一行. 相对定位 position: relative 相对于自己定位 不脱离文档流,元素原有位置被保留 绝对定位 posit ...
- Python终端如何输出彩色字体
实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27 ...
- codevs 2021 中庸之道
2021 中庸之道 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 给定一个长度为N的序列,有Q次询问,每次 ...
- javascript面向对象:继承、多态
继承 js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属性),同时可扩展自己的成员,下面介绍几种js中实现继承的方式: 1,对象模仿:通过动态的改变 this 指针的指向,实现 ...
- 改进你的WordPress导航菜单 —— 输出标题描述
在WordPress 3.0中增加了自定义菜单功能,如果你在WordPress后台(外观>菜单)创建一个菜单,你可以在主题中使用wp_nav_menu()函数来显示这些菜单.但是像图中这种带描述 ...
- cURL函数
PHP的cURL函数是通过libcurl库与服务器使用各种类型的协议进行连接和通信的,curl目前支持HTTP GET .HTTP POST .HTTPS认证.FTP上传.HTTP基于表单的上传.co ...
- js中的逻辑与(&&)和逻辑或(||)
之前有一个同事去面试,面试过程中碰到这样一个问题: 在js中写出如下的答案 : var a = 2; var b = 3; var andflag = a && b ; var orf ...
- 浅谈Android中拍照、从相册选择图片并截图相关知识点
前言 我们在Android开发中经常会需要使用相机或者从相册中选取图片的情况,今天就把这里面相关的知识点总结下,方便以后开发的时候使用. 1.相机拍照并可自定义截图功能 我们先来看如何使用Intent ...
- eclipse中 linked resource的使用
一.关于linked resource eclipse 中的linkded resources 是指存放在项目所在位置以外某个地方的文件或者文件夹:这些特定的资源必须有一个项目作为他们的父资源.l ...