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实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 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中的时间显示
2007/01/18 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Python实现的简单dns查询功能示例
2017/05/24 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
公务员职业生涯规划书范文  
2014/01/19 职场文书
倡议书的写法
2014/08/30 职场文书
四风查摆剖析材料
2014/10/10 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python