/*
* @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的更多相关文章

  1. JQuery Placeholder - Input提示信息

    JQuery Placeholder Placeholder属性是HTML5为Input添加的,在Input上提供一个占位符,文字形式展示输入文字预期值的提示信息. 如: 需要使用:placehold ...

  2. jquery.placeholder.js的使用

    最近做东西用到placeholder这个属性,可是这个属性在低版本的IE或者QQ浏览器等这些浏览器上这个属性不能生效,后来在网上查了下,发现了jquery的一个插件jquery.placeholder ...

  3. jquery.placeholder.min.js让吃屎的IE浏览器支持placeholder去吧

    描述:现在都是HTML5时代了,所有的浏览器都支持placeholder,唯独IE不支持.现在我们有了这款插件,IE下终于可以支持了!  图片展示:   兼容浏览器:IE6+/Firefox/Goog ...

  4. 【学习】jquery.placeholder.js让IE浏览器支持html5的placeholder

    type为text或password的input,其在实际应用时,往往有一个占位符,类似这样的: 在没有html5前,一般写成value,用js实现交互,文本框获得焦点时,提示文字消失,失去焦点时,文 ...

  5. jquery 小插件,完成“输入字段预期值的提示信息”,防html5 placeholder属性

    前言:在很多时候,我们需要文本框中显示默认值,获取焦点时,文字框中就会清空给的值,当失去焦点时,如果没有值,继续显示默认的文字,如果有输入值,就显示输入的值.现在项目中需要用到这个地方的功能比较多,于 ...

  6. Jquery插件placeholder的用法

    闲的蛋疼,演示一下Jquery插件placeholder的用法,借助该插件能够轻松实现HTML5中placeholder特效: 效果图: 实现代码: <%@ page language=&quo ...

  7. jQuery插件placeholder的使用方法

    借助该插件可以轻松实现HTML5中placeholder特效: 实例代码如下: <script type="text/javascript" src="<%= ...

  8. 实用的placeholder插件,兼容IE下的placeholder,jquery插件

    placeholder在IE下无法兼容 ,下面的插件很好的处理了这个问题,拿去不谢 /* * jQuery placeholder, fix for IE6,7,8,9 * @website itmy ...

  9. html5 placeholder ie 不兼容问题 解决方案

    解决HTML5 placeholder的方案 来源:   时间:2013-09-05 20:06:49   阅读数:11375 分享到: 0 [导读] 使低版本浏览器支持Placeholder有很多方 ...

随机推荐

  1. ob_start()

    ob_start()函数用于打开缓冲区 1.用于header()之前 ob_start(); //打开缓冲区 echo "Hellon"; //输出 header("lo ...

  2. Python学习笔记 之 递归、二维数组顺时针旋转90°、正则表达式

    递归.二维数组顺时针旋转90°.正则表达式 1.   递归算法是一种直接或间接调用自身算法的过程. 特点: 递归就是在过程或函数里调用自身 明确的递归结束条件,即递归出口 简洁,但是不提倡 递归次数多 ...

  3. poi导出的excel的数字小数位过多?

    最近在使用Apache的POI组件对Excel进行操作,在对excel导出的时候,导出的数字本来只有两位小数,得到的结果就变成了很多位小数.如下面的图所示: 虽然对单元格使用了setCellStyle ...

  4. tensrflow python [defunct]

    在ubuntu上面安装了GPU版本的tensorflow后,很容易碰到zombie thread 的问题,无法正常关闭tensorflow的线程,用ps aux|grep python可以看到 pyt ...

  5. ADMM与one-pass multi-view learning

    现在终于开始看论文了,机器学习基础部分的更新可能以后会慢一点了,当然还是那句话宁愿慢点,也做自己原创的,自己思考的东西.现在开辟一个新的模块----多视图学习相关论文笔记,就是分享大牛的paper,然 ...

  6. 四、Shell输入、输出功能和字符颜色设置

    一.Shell输入功能 1.键盘输入   方式一: [root@Salve four]# cat test.sh #!/bin/bash #-e 参数可以解析语句中的转义字符 echo -e &quo ...

  7. css3 动画效果 总结 不断完善~~

    1.transition 动画过程改变某个css属性的效果 (比如宽高 颜色) 语法 transition:    all  所有元素                                + ...

  8. JavaScript模板引擎原理,几行代码的事儿

    一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age% ...

  9. 【Json】关于json解析时异常org.json.JSONException: A JSONObject text must begin with '{' at character 1 of {的解决方法

    遇到这种异常有几种情况: 1.JSON格式有问题,检查一下格式. 2.格式没问题,仍然报错,这个是因为你的json文件头里带有编码字符(如UTF-8等),读取字符串时json串是正常的,但是解析就有异 ...

  10. Android高手速成--第二部分 工具库

    主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过依赖注入减少Vie ...