原文：https://www.oschina.net/code/snippet_206691_26471#44160

让支持的直接路过，不支持的，完美显示~~

/*
 * jQuery placeholder, fix for IE6,7,8,9
 * @author JENA
 * @since 20131115.1504
 * @website ishere.cn
 */
var JPlaceHolder = {
    //检测
    _check : function(){
        return 'placeholder' in document.createElement('input');
    },
    //初始化
    init : function(){
        if(!this._check()){
            this.fix();
        }
    },
    //修复
    fix : function(){
        jQuery(':input[placeholder]').each(function(index, element) {
            var self = $(this), txt = self.attr('placeholder');
            self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
            var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
            var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
            self.focusin(function(e) {
                holder.hide();
            }).focusout(function(e) {
                if(!self.val()){
                    holder.show();
                }
            });
            holder.click(function(e) {
                holder.hide();
                self.focus();
            });
        });
    }
};
//执行
jQuery(function(){
    JPlaceHolder.init();   
});
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery JPlaceholder Demo</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.JPlaceholder.js"></script>
</head>
 
<body>
<form>
<div>
  <ul>
    <li>
      <input type="text" name="username" placeholder="用户名">
    </li>
    <li>
      <input type="password" name="username" placeholder="密码">
    </li>
    <li>
      <button type="button">登录</button>
    </li>
  </ul>
</div>
</form>
</body>
</html>

让IE支持placeholder属性~的更多相关文章

  1. 让ie8支持 placeholder 属性

    一.  ie8支持 placeholder 属性 /* * ie8支持 placeholder 属性 */ $(function(){ if( !('placeholder' in document. ...

  2. input date 支持placeholder属性

    第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能   ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{  col ...

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

    placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...

  4. 让ie支持placeholder属性，一段js搞定

    placeholder属性真的是超级好用的新属性,可惜,只有新版浏览器才支持,为了写出输入框贴心提示,老方法就是加span标签覆盖,营造出placeholder提示的感觉,现在安利一款好用的js,好用 ...

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

    开发一个项目的时候为了美观和用户体验用到了input标签的placeholder属性,但是这个属性是html5中的,所以低版本的IE浏览器不支持.于是在百度找了一些解决方法,找了好几个都不是那么完美, ...

  6. 有关ie9 以下不支持placeholder属性以及获得焦点placeholder的移除

    (一)placeholder 属性起到提示客户输入信息作用 (二)ie9以下出问题了 placeholder不支持 (三)解决办法 先贴html 加上jquery代码就可以了 关于表单获取焦点,chr ...

  7. 让div支持placeholder属性/模拟输入框的placeholder属性

    实现方式:css div:empty:before{ content: attr(placeholder); color:#bbb;}div:focus:before{ content:none; }

  8. IE9以下不支持placeholder属性

    jquery.placeholder.min.js 这个js可以去这个网站搜索https://www.bootcdn.cn/jquery-placeholder/ 使用这个jquery.placeho ...

  9. i8浏览器不支持placeholder属性解决办法，以及解决后，文字不居中问题

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

随机推荐

  1. Python函数中的参数（二）

    当使用混合特定的参数匹配模型时,Python将会遵循以下有关顺序的法则: 1.在函数调用中,参数必须以这样的顺序出现:任何位置参数(Value).任何关键字参数(name = Value)和*sequ ...

  2. javascript 原型详解

    引:http://www.cnblogs.com/wangfupeng1988/p/3978131.html 1.什么是javascript原型 每一个函数都有prototype属性(默认生成的)和原 ...

  3. JS --正则表达式验证、实战之邮箱模式

     JS验证格式:提高用户体验,验证文本. 需要防止程序员的代码结构更改攻击,因为web段的代码有可能会被更改,更改后JS有可能会验证不住那么,C#端在JS段通过验证的情况下,还需要进行二次验证 < ...

  4. time时间处理

    time模块的使用 import time print(time.time()) 输出: 1476798696.6639342 #表示从1970 年 1 月 1 日 00:00:00到当前的秒数 pr ...

  5. Nginx配置文件（nginx.conf）配置详解

    Nginx的配置文件nginx.conf配置详解如下: user nginx nginx ; Nginx用户及组:用户 组.window下不指定 worker_processes 8; 工作进程:数目 ...

  6. asp.net GridView控件中诗选全选和全不选功能

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  7. c# SqlHelper Class

    using System;using System.Collections;using System.Collections.Generic;using System.Data;using Syste ...

  8. C++队列中应该注意的一些问题

    第一次在C++中写类,新手,见笑 #include<iostream.h>#include<iostream>template<typename T> class ...

  9. docker 安装

    Docker使用了一种叫AUFS的文件系统,这种文件系统可以让你一层一层地叠加修改你的文件,最底下的文件系统是只读的,如果需要修改文件,AUFS会增加一个可写的层(Layer),这样有很多好处,例如不 ...

  10. 技术英文单词贴--S

    S separator 分离,隔离器 shortcut 快捷方式,捷径 sort 排序 special 特殊的,专用的 specified 规定的,详细说明,指定 specify 指定,明确提出,详细 ...