/*
* @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. Android只能动态注册的广播Action

    只能动态注册的广播(部分): android.intent.action.SCREEN_ON android.intent.action.SCREEN_OFF android.intent.actio ...

  2. 使用gulp-connect实现web服务器

    安装插件安装gulp-connect插件,安装命令如下 npm install --save-dev gulp-connect 定义web服务,gulpfile.js代码 var gulp = req ...

  3. Git从入门到学会

    Git简介 Git是什么? Git和SVN一样都是一种高效的管理代码的系统. Git是目前世界上最先进的分布式版本控制系统(没有之一). 创建版本库 什么是版本库呢?版本库又名仓库,英文名reposi ...

  4. npm全局安装和本地安装和本地开发安装(npm install --g/--save/--save-dev)

    详细说明参考:http://www.cnblogs.com/PeunZhang/p/5629329.html 我个人理解: 1.全局安装(npm install -g)是为了用命令行,比如在windo ...

  5. 错误信息:内存位置访问无效。 (Exception from HRESULT: 0x800703E6)

    错误提示: 错误信息:内存位置访问无效. (Exception from HRESULT: 0x800703E6) 异常类型:System.BadImageFormatException 堆栈跟踪: ...

  6. R语言排序:sort(),rank(),order()示例

    > x<-c(97,93,85,74,32,100,99,67) > sort(x) [1] 32 67 74 85 93 97 99 100 > order(x) [1] 5 ...

  7. jquery ripples水波纹效果( 涟漪效果)

    这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...

  8. 即时搜索或input实时检测监听输入框变化

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...

  9. 在ie浏览器,360浏览器下,margin:0 auto;不居中的原因

    转自 http://blog.sina.com.cn/s/blog_6eef6bf60100nn4m.html margin:0 auto:不居中可能有以下两个的原因 没有设置宽度 看看上面的代码,根 ...

  10. [译]ES6中的代理对象

    原文:http://ariya.ofilabs.com/2013/07/es6-and-proxy.html 能够拦截在一个对象上的指定操作的能力是非常有用的,尤其是在故障调试的时候.通过ECMASc ...