在IE8等不支持placeholder属性的浏览器中模拟placeholder效果
placeholder是一个很有用的属性，可以提示用户在input框中输入正确的内容，但是IE8以及IE8一下的浏览器不支持该属性，我们可以使用js来模拟相似的效果。下面直接上代码：
<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>placeholder</title>
<style type="text/css">
*{margin:0;padding:0;}
form {margin:50px;}
input {display:block;margin:0 0 6px 0;}
</style>
</header>
<body>
<form>
用户名：<input name="name" placeholder="请输入用户名"/>
密码：<input name="password" placeholder="请输入登陆密码"/>
</form>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
function placeholderSupport() { // 判断浏览器是否支持 placeholder
return 'placeholder' in document.createElement('input');
} if(!placeholderSupport()){
$(document).on('focus', '[placeholder]',function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
});
$(document).on('blur', '[placeholder]',function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
});
$('[placeholder]').blur();
};
});
</script>
</body>
</html>
'placeholder' in document.createElement('input') ，该行代码利用 in 表达式来判断浏览器中的 input 元素中是否有 placeholder 属性存在。
$('[placeholder]') 是一个Jquery 的属性选择器，选择页面上所有的具有 placheholder 属性的元素。在页面加载完成时我们首先调用 blur() 方法，将所有 input 元素的值 设置 为 input 属性 placeholder 对应的值，从而模拟 placeholder 的效果。
效果如下图所示：
选中 input 时的效果：
在IE8等不支持placeholder属性的浏览器中模拟placeholder效果的更多相关文章
- html5的placeholder属性（IE如何兼容placeholder属性）
界面UI推荐 jquery html5 实现placeholder兼容password IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...
- onunload事件火狐不支持，在IE浏览器中，只有刷新时该事件才发生
onunload事件火狐不支持,在IE浏览器中,只有刷新时该事件才发生
- 解决seajs ie8 对象不支持charAt 属性。
在使用 seajs做项目,今天偶然发现在ie9以下的ie版本会 报出 对象不支持charAt 属性.刚开始还以为是自己写的js部分出了问题,经过几个小时的奋战.最终找到了其根源.在sea-debug. ...
- 【工作笔记五】html5的placeholder属性（IE如何兼容placeholder属性）
placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...
- 给IE9及其以下等不支持classList属性的浏览器,添加classList属性
// 解决IE9及其以下 不支持classList属性的问题 if (!("classList" in document.documentElement)) { Object.de ...
- 兼容的placeholder属性
作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文.是不是该考虑换方向了,转前端开发得了 ... 小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症! 继续前端,这次说一下输入框 p ...
- HTML5表单提示placeholder属性兼容IE
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- HTML 5 <input> placeholder 属性
原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...
- Hmtl5 <input>中placeholder属性（新属性）
Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示 ...
随机推荐
- Angular系列----AngularJS入门教程04：迭代器过滤（转载）
我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...
- mysql如何更改数据库名(一键实现mysql改数据库名)
由于某种原因,有时我们有可能需要数据库的名称,但是不像官方有rename可以去更改表名,并没有一个命令可以去更新数据库的名字. 思路:借助rename这个命令 基本操作:rename olddb.ta ...
- 基于GTID Replication主从数据不一致操作
基本的M-S结构 现在master与slave主机数据一致: mysql> select * from t1; +------+ | id | +------+ | 1 | | ...
- 基于android平台的斗地主AI
本软件是基于android平台的斗地主AI,我们在源代码的基础之上,旨在改进AI的算法,使玩家具有更丰富的体验感,让NPC可以更为智能. (一)玩法解析: (1)发牌和叫牌:一副扑克54张,先为每个人 ...
- [水煮 ASP.NET Web API2 方法论]（3-4）设置路由可选项
问题 怎么样创建一个路由,不管客户端传不传这个参数,都可以被成功匹配. 解决方案 ASP.NET WEB API 的集中式路由和属性路由都支持路由声明可选参数. 在用集中式路由中可以通过 RouteP ...
- C#实用杂记-EF全性能优化技巧
原文链接:http://www.makmong.com/947.html#comment-31 EntityFramework 优化建议 2016年1月15日 下午4:54 LEILINKANG ...
- CSS行高line-height的理解
一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基 ...
- iOS开发系列通讯录、蓝牙、内购、GameCenter、iCloud、Passbook系统服务开
--系统应用与系统服务 iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如QQ通讯录.微信电话本会使用iOS的通讯录,一些第三方软件会在应用内发送短信等.今天将和大家一起学习如何使用 ...
- shape和selector的结合
去掉gridview本身的点击效果:android:listSelector="@color/de_transparent": 添加两个selector,灰色的press和norm ...
- #define lowbit(x) ((x)&(-x))原理详解
#define lowbit(x) ((x)&(-x)) 也可以写成如下形式: int Lowbit(x) { return x&(-x); } 例如: 1> x = 1: 十进 ...