效果：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. C# 模拟鼠标(mouse_event)

    想必有很多人在项目开发中可能遇见需要做模拟鼠标点击的小功能,很多人会在 百度过后采用mouse_event这个函数,不过我并不想讨论如何去使用mouse_event 函数怎么去使用,因为那没有多大意义 ...

  2. 关于 Redis 访问安全性的问题

    升级版本 3.0.2 版本升级到 redis-3.2.0 版本远程无法访问,比较配置文件有些变化,比如默认只能本地的机器才能访问 3.0.2 版本 # By default Redis listens ...

  3. JavaScript中的setMonth()方法的小问题 解决:setMonth(month, 1)

    今天测试人员发现一个问题,从英文日期转化中文日期,月份总会有“6月”变为“7月”.于是我在本地反复测试,发现如下规律:只要setMonth()的参数为小于31天的月份时就会变为下一个月. 原因是:因为 ...

  4. PL/SQL Developer去掉启动时自动弹出的Logon弹出框方法

    以前用PL/SQL Developer 7.0版本,最近升级到PL/SQL Developer 11.0版本,但每次启动PL/SQL Developer都会自动弹出Logon窗口,并且选中其中的登录历 ...

  5. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  6. 【Xamarin报错】AndroidManifest.xml : warning XA0101: @(Content) build action is not supported

    部署xamarin.forms android时报错: Android\Properties\AndroidManifest.xml : warning XA0101: @(Content) buil ...

  7. ux.form.field.KindEditor 所见所得编辑器

    注意需要引入KindEditor相关资源 //所见所得编辑器 Ext.define('ux.form.field.KindEditor', { extend: 'Ext.form.field.Text ...

  8. wamp2.5 不能运行在win2003的解决方法

    安装时提示 httpd.exe 不是有效的 win32程序 之后就启动不了,连小icon都不显示了 经查发现 wampserver 2.5用 vc11编译,并使用了他的类库 vc11是不支持 xp和 ...

  9. WCF的传输安全(读书笔记)

    Wcf的传输安全主要涉及认证.消息的一致性和机密性.Wcf采用两种不同的机制来解决这三个涉及传输安全的问题,即Transport安全模式和Message安全模式. Transport安全模式利用基于传 ...

  10. c# socket 解决粘包，半包

    处理原理: 半包:即一条消息底层分几次发送,先有个头包读取整条消息的长度,当不满足长度时,将消息临时缓存起来,直到满足长度再解码 粘包:两条完整/不完整消息粘在一起,一般是解码完上一条消息,然后再判断 ...