在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

By | 04月14日
Advertisement

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 的效果。

效果如下图所示:

在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

选中 input 时的效果:

在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

Similar Posts:

  • 【Extjs】ExtJS Bug之IE8对象不支持此属性或方法

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ExMyth</title> <link

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

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.以前要实现这效果都是用JavaScript来控制才能实现: <input id="t1"

  • CSS3线性渐变简单实现以及该属性在浏览器中的不同

    为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法.但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不会持续太久.多亏Firefox 和Safari/Chrome,我们现在可以使用最少的努力实现强大的渐变.在本文中,我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同. PS:本文原文本来提供了一个视频,但是由于众所周知的原因,我们无法观看这个在Youtube上的视频,想看的同学请自己想办法观看(最高720P) : htt

  • IE下实现html5中的placeholder

    IE不支持input标签中html5的placeholder属性,上网找了一下解决方法,感觉还不错. 可以封装成一个js文件,然后调用. $(function() { $("input").inputTip(); // 调用inputTip方法 $("input[type='button']").focus(); // 页面打开后焦点置于button上,也可置于别处.否则IE上刷新页面后焦点在第一个输入框内造成placeholder文字后紧跟光标现象 }); $.f

  • 基于jquery 的插件,让IE支持placeholder属性

    开发一个项目的时候为了美观和用户体验用到了input标签的placeholder属性,但是这个属性是html5中的,所以低版本的IE浏览器不支持.于是在百度找了一些解决方法,找了好几个都不是那么完美,最后决定将其中的一个拿来完善一下. 完善后的代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

  • 让IE6/IE7/IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的.到目前为止,有不少可以让IE支持部分CSS3属性的工具.例如: 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName

  • 判断浏览器是否支持input的placeholder属性

    我想判断浏览器是否支持input的placeholder属性,进而决定是否用js添加相应功能.我在网上看到了下面代码,为什么弹出的总是'no'啊?有些浏览器明明支持placeholder的,将属性名换成name也是如此 <input type='text' placeholder="用户名"/> <script> function x(){ var element = document.getElementsByTagName('input')[0]; if('

  • jQuery模拟placeholder属性

    一.概述 在使用HTML的input元素时,经常会用到placeholder属性.但是IE8不支持这个placeholder属性,有点悲催,只能使用js来模拟这个placeholder了 二.模拟placeholder的js代码 if(!$.support.placeholder) { var els = $('input[placeholder],textarea[placeholder]'); els.each(function(i, el) { el = $(el); var defVal

  • IE浏览器部分版本不支持background-siza属性问题

    background-size是CSS3新增的属性,但是IE8以下还是不支持,可以通过滤镜来实现这样的一个效果 background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比): background-size :cover; // 扩展图片来填满元素(保持像素的长宽比): background-size :100px 100px; // 调整图片到指定大小: background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元素

  • jQuery实现的一个自定义Placeholder属性插件

    HTML5中文本框的新属性placeholder是个非常好用的属性,但是IE系列直至IE9都不支持这一属性,这就让大家在用这一属性的时候有些犹豫不决.自己曾经写过很多类似共的小控件,但是都不是很通用,这里分享一个渐进增强的自定义placeholder的jQuery插件.有点是使用简单,大家也可以根据自己的需要进行改进.平常写jQuery插件比较少,考虑到用jQuery的同学比较多,这里就用jQuery插件的形式编写了. 在这里简单的介绍一下实现思路. 1.表现与html5原生的placehold

Tags: