效果：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. android studio logcat 换行（日志换行）

    起因 今天突然要调试网络数据,调试一大截那个xml数据. 解决思路 一开始去setting哪里看一下logcat 是否有line break,类似的字眼,可惜没有. 我猜如果没有在设置的话,估计就在“ ...

  2. 命令行的全文搜索工具--ack

    想必大家在命令行环境下工作时候,一定有想要查找当前目录下的源代码文件中的某些字符的需求,这时候如果使用传统方案,你可能需要输入一长串的命令,比如这样: 1. grep -R 'string' dir/ ...

  3. 小兔的棋盘（hdu2067）

    小兔的棋盘 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  4. web端视频直播网站的弊端和优势

    在YY上市前后,国内涌出一批类YY视频直播或9158的秀场类网站. 比如六间房,酷六等等 这种web端视频服务基本依靠web本身的特性,用flash直播,靠CDN提供服务. 但是这样的架构有2个问题 ...

  5. 【Linux】——ctags

    ctags的功能:扫描指定的源文件,找出其中所包含的语法元素,并将找到的相关内容记录下来. ctags 可以在官网上下载源代码,然后编译安装.最后在 ~/.vimrc 文件中写入以下配置: " ...

  6. Customer IEnuramble Extension

    public static class IEnurambleExtension { public static IEnumerable<TSource> DistinctBy<TSo ...

  7. hexdump—Linux系统的二进制文件查看工具

    hexdump 无参: 相当于 hexdump -x 0000000 457f 464c 0102 0001 0000 0000 0000 0000 0000010 0002 003e 0001 00 ...

  8. 温故而知新：Delegate,Action,Func,匿名方法,匿名委托,事件

    Tks: http://www.cnblogs.com/yjmyzz/archive/2009/11/23/1608818.html 20150801 add: http://www.cnblogs. ...

  9. SQL SERVER 2008 如何查询含有某关键词的表

    最新文章:Virson's Blog 文章来自:百度知道 /** 查询一个数据库中所有的数据中是否包含指定字符串 */ ) set @str='字符串' --要搜索的字符串 ) declare tb ...

  10. Android Matirx的简介

    在Android中,对图片的处理需要使用到Matrix类,Matrix是一个3 x 3的矩阵,他对图片的处理分为四个基本类型: 1.Translate————平移X,Y轴变换,而不是移动图形 2.Sc ...