<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. Eclipse/JavaWeb (一)三大框架之struts框架 持续更新中...

    最近主要把javaweb的三大框架过一遍. (一)发展历史 传统的Java Web应用程序是采用JSP+Servlet+Javabean来实现的,这种模式实现了最基本的MVC分层,使得程序分为几层,有 ...

  2. 多线程知识点总结 -NSThread4

    NSThread 三种创建方式 NSThread的对象方法 - (void)threadDemo1 { NSLog(@"before %@", [NSThread currentT ...

  3. [原创]IIS7.5下配置ASP+PHP环境及错误处理(0xc0000135)

    IIS7.5下配置ASP+PHP环境及错误处理(0xc0000135) http://user.qzone.qq.com/93701178/blog/1398155812 操作系统更新至Win7或Wi ...

  4. win32记事本程序(一)

    我不会取标题,大体上我想用win32,模仿windows的记事本,写个记事本程序,最后让我的程序和微软的程序在外观和功能上都差不多.这样一来我可以学到一些新知识,巩固旧的知识. 一.首先做个菜单栏吧. ...

  5. 前端一:走进HTML

    一:HTML(HyperText Markup Language)介绍 超文本标记语言,标准通用标记语言下的一个应用.“超文本”就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素.超文本标记语 ...

  6. 海洋女神建新installshield交流群了,原来的老群都满了,请加新群哦,记得认真填写验证信息

    群号511751143 海洋女神installshield群

  7. android 手机屏幕有关的几个工具(屏幕宽高,dp和px互相转换)

    平时适配页面时经常会需要根据屏幕的宽高来设置控件的大小,很多时候在代码中还会需要dp和px互相转换. 今天把最常用的几个记录一下,经测试包括2.3 ~ 5.0之间的版本都可用,其他版本未测,不过应该也 ...

  8. ubuntu 非常简单的方式安装多个perl版本

    参考http://stackoverflow.com/questions/22934080/how-to-downgrade-to-perl-5-10-1 Perlbrew will allow yo ...

  9. 行列式计算(C#)

    最近几天学习高等代数老师说要写个程序算行列式的结果,闲来无事就简单写了一下. 不多说了,上代码 using System; using System.Collections.Generic; usin ...

  10. 简单说一个IOCP不好的地方

    感谢rulary的指正!博文中我对IOCP的理解是有误的,正确的方式请见评论区rulary的回复! 由于项目实际设计的需要,最终IO事件处理没有采用IOCP,而是采用了NT6.0引入的WSAPoll, ...