HTML 5 input placeholder 属性如何完美兼任ie


Posted in HTML / CSS onMay 12, 2014

记得引用jquery 类库

复制代码
代码如下:

$(document).ready(function () {
if ($.browser.msie)
$("input:text,input:password").each(function () {
var $placeholder = $(this).attr("placeholder");
var $width = $(this).css("width");
var $id = $(this).attr("id");
var $height = parseInt($(this).css("height")) + 6 + "px";
var $fontSize = $(this).css("font-size");
var $fontWeight = $(this).css("font-weight");
var $lineHeight = $height;
if ($(this).css("line-height") != "normal") {
$lineHeight = parseInt($(this).css("line-height")) + 6 + "px";
}
if ($placeholder != undefined) {
$(this).after("<span class=\"placeholder ph_" + $id + "\" style=\"width:" + $width + ";line-height:" + $lineHeight + ";height:" + $height + ";font-weight:" + $fontWeight + ";margin-left:-" + $width + ";font-size:" + $fontSize + "\">" + $placeholder + "</span>");
}
$(this).bind("keyup", function () {
if ($(this).val() == "") {
$(this).parent().find(".ph_" + $id).css("display", "inline-block");
}
else {
$(this).parent().find(".ph_" + $id).css("display", "none");
}
});
});
$(".placeholder").live("click", function () {
$(this).prev().focus();
});
});

页面调用
复制代码
代码如下:

<input id="n1" type="text" placeholder="我是提示内容正常" />

<input id="n2" type="text" placeholder="我是提示内容宽高" style="width:100px;height:100px;" />

<input id="n3" type="text" placeholder="我是提示内容我有其他样式" / style="width:300px;height:40px;font-weight:bold;">

<input id="n4" type="text" placeholder="还可以尝试下其他的" />


样式
复制代码
代码如下:

<style type="text/css">
.placeholder {display:inline-block;color:gray;vertical-align:top;overflow:hidden;}
</style>
HTML / CSS 相关文章推荐
CSS3制作精致的照片墙特效
Jun 07 HTML / CSS
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 #HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 #HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 #HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 #HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 #HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 #HTML / CSS
html5实现canvas阴影效果示例
May 07 #HTML / CSS
You might like
php Mysql日期和时间函数集合
2007/11/16 PHP
php不用正则采集速度探究总结
2008/03/24 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP XML数据解析代码
2010/05/26 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
python自动化发送邮件实例讲解
2021/01/04 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
经销商培训邀请函
2014/01/21 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书