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效果的更多相关文章

  1. html5的placeholder属性(IE如何兼容placeholder属性)

    界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...

  2. onunload事件火狐不支持,在IE浏览器中,只有刷新时该事件才发生

    onunload事件火狐不支持,在IE浏览器中,只有刷新时该事件才发生

  3. 解决seajs ie8 对象不支持charAt 属性。

    在使用 seajs做项目,今天偶然发现在ie9以下的ie版本会 报出 对象不支持charAt 属性.刚开始还以为是自己写的js部分出了问题,经过几个小时的奋战.最终找到了其根源.在sea-debug. ...

  4. 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

  5. 给IE9及其以下等不支持classList属性的浏览器,添加classList属性

    // 解决IE9及其以下 不支持classList属性的问题 if (!("classList" in document.documentElement)) { Object.de ...

  6. 兼容的placeholder属性

    作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文.是不是该考虑换方向了,转前端开发得了 ... 小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症! 继续前端,这次说一下输入框 p ...

  7. HTML5表单提示placeholder属性兼容IE

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  8. HTML 5 <input> placeholder 属性

    原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...

  9. Hmtl5 <input>中placeholder属性(新属性)

    Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示 ...

随机推荐

  1. Java魔法堂:初探MessageFormat.format和ChoiceFormat

    一.前言 刚开始从.net的转向java的时候总觉得 String.format 用得不习惯,希望格式模版会这样 {}, }$s,$s's cat.%2$s,this is %1$s's dog. . ...

  2. JavaScript学习总结 Ajax和Http状态字

    Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡. AJAX是不能跨域的,如需跨域,可以使用document.domain= ...

  3. C#中部分方法返回值类型为什么只能是void?

    这个问题答案选至<C#入门经典> 如果方法具有返回类型,那就可以作为表达式的一部分: x=Manipulate(y,z); 如果没有给部分方法提供实现代码,编译器就会在使用该方法的所有地方 ...

  4. 常用库nuget包集合

    ColorConsole htmlagilitypack.1.4.9.5 经测试效率比 CsQueryLaster 高 csvhelper Extend Devlib系列一套 itextsharp l ...

  5. Ajax,谷歌提示AutoCompleteExtender控件

    提示内容从数据库中读取: ------------------------------------------页面 <asp:ScriptManager ID="ScriptManag ...

  6. ASP.NET Web API获取Model元数据

    using System; using System.Web.Http; using Common; namespace ConsoleApp { internal class Program { p ...

  7. Hexo建博小结

    本来只写在自己的github pages中的,想一想万一有人看呢,虽然同类的文章有不少了,但有些新坑他们没填啊,姑且放出来啦... 拥有自己的博客是一个很酷的事情,但自己建站总是太麻烦了,步骤繁多,管 ...

  8. 浅谈ClickableSpan , 实现TextView文本某一部分文字的点击响应

    超文本:http://www.baidu.com 这么一个效果:一行文本当中 前面显示黑色颜色的“超文本:”,后面显示红色颜色的“http://www.baidu.com” 并且要求红色字体的部分可以 ...

  9. java多线程系列2-线程控制

    前面的文章已经介绍了有关线程的调度,接下来介绍如何使用方法对线程进行控制 1.线程休眠 public static void sleep(long millis) /* * 线程休眠 * public ...

  10. 【读书笔记】iOS-简单的数据驱动程序

    一,效果图. 二,,工程文件如下图所示: 三,DataModel.h #import <Foundation/Foundation.h>   @interface DataModel : ...