<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> 类型 ...
随机推荐
-
Alipay秘钥问题
有三种秘钥一个是应用公钥 一个是支付宝公钥 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco } span.s1 { text-d ...
-
MongoDB学习笔记(1):MongoDB简介
1. MongoDB的特点: (1) 易于使用 MongoDB是一个面向文档的数据库,非关系型数据库.通过在文档中嵌入式文档和数据,面向对象的方法能够仅使用一条记录来表现复杂的层次关系.文档的键和值不 ...
-
JSP合用html5 尝试(一)
直接上代码 <%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> ...
-
4.事务提交过程,交易的基本概念,Oracle交易周期,保存点savepoint,数据库的隔离级别
事务提交过程 事务 基本概念 概念:一个或者多个DML语言组成 特点:要么都成功.要么都失败 事务的隔离性:多个client同一时候操作数据库的时候.要隔离它们的操作, 否则出现:脏读 不可反 ...
-
初笔,JAVA.HelloWorld代码详解
HelloWorld.java //文件名 public class HelloWorld{ public static void main(String[] args){ System.out.pr ...
-
Windows的四类消息
Windows的三类消息1.标准消息宏名称 对映消息 消息处理函数(名称已由系统预设)ON_WM_CHAR WM_CAHR OnCharON_WM_CLOSE WM_CLOSE OnCloseON_W ...
-
现代 PHP 新特性 —— Zend Opcache (转)
转自:https://laravelacademy.org/post/4396.html 1.概述 字节码缓存不是PHP的新特性,有很多独立的扩展可以实现,比如APC.eAccelerator和Xac ...
-
PJ可能会用到的动态规划选讲-学习笔记
PJ可能会用到的动态规划选讲-学习笔记 by Pleiades_Antares 难度和速度全部都是按照普及组来定的咯 数位状压啥就先不讲了 这里主要提到的都是比较简单的DP 一道思维数学巧题(补昨天) ...
-
2018.4.23 git命令总结
git clone git pull git add xx git add . git add -A git branch 查看本地分支 git branch --all 查看所有分支 git bra ...
-
CSS中的通用字体
往往设计师在设计时一厢情愿地去思考问题,那样会带来很多潜在的麻烦.事实上你可以为网页设计任意字体,包括艺术字体.也许你的计算机中已经安装了很多字体,但是不能够保证所有的浏览者都已经安装了相同的字体,因 ...