<script src="assets/js/jquery-1.9.1.min.js"></script>
<script>
/*
* jQuery placeholder, fix for IE6,7,8,9
* @author JENA
* @since 20131115.1504
* @website ishere.cn
*/
var JPlaceHolder = {
//检测
_check : function(){
return 'placeholder' in document.createElement('input');
},
//初始化
init : function(){
if(!this._check()){
this.fix();
}
},
//修复
fix : function(){
jQuery(':input[placeholder]').each(function(index, element) {
var self = $(this), txt = self.attr('placeholder');
self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left+10, top:pos.top+8, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
self.focusin(function(e) {
holder.hide();
}).focusout(function(e) {
if(!self.val()){
holder.show();
}
});
holder.click(function(e) {
holder.hide();
self.focus();
});
});
}
};
//执行
jQuery(function(){
JPlaceHolder.init();
});
</script>

根据自己的输入框大小,进行微调

参考地址:http://www.oschina.net/code/snippet_206691_26471

input输入框文字提示IE兼容的更多相关文章

  1. INPUT输入框灰体提示

    INPUT输入框灰体提示 <input type="text" value='15 words limit' style="color:#999999" ...

  2. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

  3. DataList:HTML5中的input输入框自动提示宝器

    DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...

  4. input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈 大家可以看效果图的搜索输入框, ...

  5. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  6. 小问题总结:鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现

    问题如标题: 鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现.如图所示:   做法如下: <input type="text" name ...

  7. input输入框限制输入正整数、小数、字母、文字

    有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...

  8. 实现password框中显示文字提示的方式

    其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就 ...

  9. 认识input输入框的placeholder属性

    我们来认识下input输入框的placeholder属性. placeholder 属性提供可描述输入字段预期值的提示信息.(placeholder 属性适用于以下的 <input> 类型 ...

随机推荐

  1. SQL注入的常用函数和语句

    1.系统函数 version()   Mysql版本user()   数据库用户名database()    数据库名@@datadir   数据库路径@@version_compile_os   操 ...

  2. Eclipse Java class修改后的即时编译

    通常情况下,修改了java文件,需要重启eclipse.但是myeclipse可以不用. 其实即时编译早就有了,通过简单配置javaRebel配置,可以达到修改java文件后不重启eclipse. 注 ...

  3. Android Studio项目目录结构介绍——android菜鸟成长之路

    在Android Studio中,提供了以下几种项目结构类型 我们一般常用的有以下两种结构: Project 结构类型 app/build/ app模块build编译输出的目录 app/build.g ...

  4. codeforces 651C(map、去重)

    题目链接:http://codeforces.com/contest/651/problem/C 思路:结果就是计算同一横坐标.纵坐标上有多少点,再减去可能重复的数量(用map,pair存一下就OK了 ...

  5. Exchange 基本命令累计

    Get-ExchangeServer | fl name,edition,admindisplayversion  //查看exchange服务器版本

  6. SVN的部署及分支等方法

    1.本地Repository的创建 repository的创建很简单,假设我要在D:\TortoiseSVN\TestRepository目录中创建repository,只需 右键TestReposi ...

  7. Redmine CodeReview

    Windows Bitnami Redmine通过自带必要的RoR依赖,解决了Redmine安装困难的问题,但也带来了很多Redmine的文档无法使用到Bitnami的问题.原因应该是很多命令不在用户 ...

  8. 【JavaScript忍者秘籍】

  9. (原创)MongoDB之NoSQL简介

    Nosql简介1.1系统对数据的需求        Nosql[Nosql主要用途大数据处理]的全称为”not only sql”,为非关系型数据库[非关系型数据库就是关系型数据库的所有特点都没有了, ...

  10. 想一想social VR might just work

    昨天玩了Oculus上的Casino VR(其实之前就知道这个瑞士公司,也下过standalone的PC client). 几把下来,居然觉得fun,总结起来: 1.是在一个immersive的环境中 ...