在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). 该提示会在输入字段为空时显示 ...
随机推荐
- GoodsAndStaffManagermentSystem----Sprint 计划1
需求分析:茗仕茶业管理系统是个商品-员工综合管理系统. 员工管理:设置不同的职位,不同职位有不同访问权限.员工只能卖商品,财务员只有查看商品的库存量和商品销售记录:公司老板可以查看所有信息-- ...
- thread_LockSupport
LockSupport是用来创建锁和其他同步类的基本线程阻塞原语. LockSupport中的park() 和 unpark() 的作用分别是阻塞线程和解除阻塞线程,而且park()和unpark() ...
- JAVA - package与import解析(一)
一.为什么要引入package和import?这个问题和c++中引入命名空间是一样的,也是为了解决重名问题.java通过包机制来解决重名问题,也就相当于给重名的代码加一系列前缀,从而达到唯一标识的作用 ...
- Hyperion Business Modeling for Microsoft Windows (32-bit)
介质包搜索 常见问题 说明 复查 许可证列表 以确定需要下载的产品程序包. 请选择产品程序包和平台,然后单击“查找”. 如果只有一项结果,则可以看到下载页.如果有多个结果,请选择一个,然后单 ...
- 重构第21天 合并继承 (Collapse Hierarchy)
理解:本文中的”合并继承”是指如果子类的属性和方法也适合于基类,那么就可以移除子类,从而减少依赖关系. 详解:上一篇我们讲到“提取子类”重构是指当基类中的一个责任不被所有的子类所需要时,将这些责任提取 ...
- 剑指offer面试题31连续子数组的最大和
一.题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果 ...
- 使用EasyUI的插件前需要引入的文件
一.使用EasyUI的插件需要引入一些文件 1.引入相关文件 easyui.css: easyUi的样式文件 icon.css:easyUI的图标样式文件 easyui.min.js:easyUi的类 ...
- wpf 查找页面的所有TextBox
private void EnumVisual(Visual myVisual) { for (int i = 0; i < VisualTreeHelper.GetChildrenCount( ...
- 从零开始学习Linux(ls命令)
学习Linux已经两年了,可是仍然是小白一个.用过很多命令,可是很多都没记住,基础不扎实,很大程度上是不记笔记,得过且过. 从今天起,开始整理Linux笔记. Linux每个命令都有--help这个选 ...
- java四大域总结
最近学完了web部分,发现有些地方总是单个容易理解,可是把所有的放在一起来大杂烩,总是有那么几个知识点容易混淆.其实网上的资料已经够多了,虽然也不乏辛劳的搬运工.可是最终的目的不就是要我们自身理解吗? ...