效果：http://hovertree.com/texiao/jquery/43/

效果二：http://hovertree.com/texiao/jquery/43/1/

请在IE中体验。

1、创建JS文件：jquery.JPlaceholder.js

js代码如下：

/*

 * jQuery placeholder, fix for IE6,7,8,9

* hovertree.com

 */

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();

});

2、页面中使用方法如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery JPlaceholder Demo - 何问起</title>

<script src="http://hovertree.com/ziyuan/jquery/jquery-1.8.3.min.js"></script>

<script src="http://hovertree.com/texiao/jquery/43/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>

<a href="http://hovertree.com/h/bjaf/ww7ek8wn.htm">参考</a>

</body>

</html>

input placeholder属性IE、360浏览器兼容性问题的更多相关文章

  1. 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

    <完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...

  2. HTML 5 <input> placeholder 属性

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

  3. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

  4. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. 完美让IE兼容input placeholder属性的jquery实现

    调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...

  6. HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失

    H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...

  7. HTML <input> placeholder 属性

    css ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mo ...

  8. html5 <input> placeholder 属性

    带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <inp ...

  9. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...

随机推荐

  1. 在Oracle Linux Server release 6.4下配置ocfs2文件系统

    ① 安装ocfs-tools-1.8 如果是使用RedHat Enterprise Linux 6.4,也可以安装ocfs-tools-1.8的,只是要插入Oracle Linux Server re ...

  2. ecshop退出登录会清空购物车的bug优化，最完美解决方法

    ecshop退出登陆后,会清空购物车,大家都应该知道有这样的勉强算bug的问题. 网上类似的教程相当多,但都有问题,说句不好听的,算是引新手入歧途! 总结网上方法如下: 1.修改init.php,把s ...

  3. Notes on how to use Webots, especially how to make a robot fly in the air

    How to create a new project Wizard - New project directory   Scene Tree Scene tree is a representati ...

  4. 我的常用mixin 之 px

    $unit: .667px; @function px($value){ @return $unit * $value; } $unit: 1px; 时 px(1) 就是 1px 一般情况下,设计师给 ...

  5. TWaver Flex开发示例及license下载

    做电信项目的朋友一定知道TWaver,而Flex版具有很好的跨平台性,很适合做B/S模式的应用. Flex版的在线DEMO:http://twaver.servasoft.com/demo/twave ...

  6. [原]OpenGL基础教程（五）缓冲区数据更新方式

    1.glBufferSubData 适用于相同数据类型 void SetPositionY(float y){    vector<Vector3<float>>::itera ...

  7. sql 查询 – left join on

      1. 问题引入   主要是为了查询在一个表中出现,而不在另一个表中出现的数据,具体来说: 如下图所示, 有A.B两个表,其中B表的Aid字段参照A表的主键id,为了查询在A表中出现,却没有被B表引 ...

  8. 通过PowerShell获取Windows系统密码Hash

    当你拿到了系统控制权之后如何才能更长的时间内控制已经拿到这台机器呢?作为白帽子,已经在对手防线上撕开一个口子,如果你需要进一步扩大战果,你首先需要做的就是潜伏下来,收集更多的信息便于你判断,便于有更大 ...

  9. 关于android中线性布局的layout_gravity属性

    当 android:orientation="vertical"  时, 只有水平方向的设置才起作用,垂直方向的设置不起作用.即:left,right,center_horizon ...

  10. DiskGenius无损调整分区大小

    一般情况下,调整分区的大小,通常都涉及到两个或两个以上的分区.比如,要想将某分区的大小扩大,通常还要同时将另一个分区的大小缩小:要想将某个分区的大小缩小,则通常还要同时将另一个分区的大小扩大.    ...