input输入框文字提示IE兼容
<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兼容的更多相关文章
- INPUT输入框灰体提示
INPUT输入框灰体提示 <input type="text" value='15 words limit' style="color:#999999" ...
- HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- DataList:HTML5中的input输入框自动提示宝器
DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...
- input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈 大家可以看效果图的搜索输入框, ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- 小问题总结:鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现
问题如标题: 鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现.如图所示: 做法如下: <input type="text" name ...
- input输入框限制输入正整数、小数、字母、文字
有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...
- 实现password框中显示文字提示的方式
其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就 ...
- 认识input输入框的placeholder属性
我们来认识下input输入框的placeholder属性. placeholder 属性提供可描述输入字段预期值的提示信息.(placeholder 属性适用于以下的 <input> 类型 ...
随机推荐
- 黑马程序员——【Java高新技术】——案例:交通灯管理系统
---------- android培训.java培训.期待与您交流! ---------- 一.交通灯管理系统的项目需求 Ø 异步随机生成按照各个路线行驶的车辆 例如: 由南向而来去往北向的车辆 - ...
- Orchard中的命令行工具
在Orchard中提供了一个命令行工具,我们可以使用这个命令行工具创建用户.创建博客.生成代码.配置网站.打包模块等.并且这个命令行工具是可以扩充的,只要我们在自己开发的模块中创建一个Command类 ...
- 关于Webstorm的一些配置
一:代码缩略图插件:CodeGlance: 二:皮肤与主题使用的sublime的系列风格. 三:实现内嵌JS代码的高亮显示.https://segmentfault.com/q/10100000024 ...
- java异步式Socket响应数据获取方案
项目中存在 云中央控制器需要使用多个Socket连接多个云终端控制器的需求. 由于终端数量大,就对整个中央控制器提出了并发的要求,然而获取Socket响应的过程是一个持续阻塞的过程,存在性能风险.而常 ...
- github上下载的文件如何在本地运行
最近想学习自己写插件,所以先下载大神写的插件膜拜下,下载下来以后,直接双击运行报错,大神怎么会犯这么低级的错误咧!所以在网上查资料,找到了解决方法. (1)上传到github上面的插件都很规范,文件根 ...
- 学习笔记:CSS3的filter属性
CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...
- Ubuntu 14.04中安装最新版Eclipse
Ubuntu 14.04中安装最新版Eclipse 来源:Linux社区 作者:Linux 1.安装OpenJDK Java 7 如果你的系统中没有安装Java,我们需要按照如下步骤事先安装好 ...
- 黑马程序员:Java编程_7K面试题之交通灯管理系统
=========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 模拟实现十字路口的交通灯管理系统逻辑,具体需求如下: 异步随机生成按照各个路线行 ...
- Redis中struct运用
c#操作缓存例如redis比较推荐ServiceStack 在redis中运用key-value存储数据,但是遇到结构体该如何处理,是类可通过get<type>(key)获得,那struc ...
- discuz ucenter无法连接数据库
discuz ucenter无法连接数据库 - discuz搬家后 ucenter无法连接数据库 论坛换了个空间,把密码和数据库名称都改了,点击ucenter时候出现了: UCenter info: ...