效果：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. Erwin 生成 mysql 带注释(comment )的脚本

    Erwin设计数据库非常方便,有逻辑视图和物理视图,可以很方便的生成数据库文档和SQL 脚本.在使用过程中唯一不爽的地方是脚本不能生成comment.   在百度无数次无法解决下,又FQ谷歌,在一个日 ...

  2. 面向.Net程序员的后端性能优化实战

    最近2个月没做什么新项目 完全是对于旧的系统进行性能优化 避免超时 死锁 数据处理能力不够等常见的性能问题 这里不从架构方面出发 毕竟动大手脚成本比较高 那么我们以实例为前提 从细节开始 优化角度 一 ...

  3. Oracle-ARCGIS-SDE 数据整合遇到的问题

    一. 近日在做全文检索,基础采用oracle text,版本是10g,做好管理页面后,有功能是删除索引,就是生成drop index的语句.没有想到这个全文检索的index这么直接弄还不行,经过这样删 ...

  4. ExtJs 可查询的下拉框

    最近项目中有个需求,就是有四个模块需要加载一个主表的内容,比如说这个表叫项目表(比如项目表里有两个字段一个是项目ID--projCd,还有一个是项目名称--projNm).主表的内容的要放在一个下拉框 ...

  5. [AX2012]发送广播邮件

    AX 2012可以使用MAPI或者SMTP发送邮件,MAPI是客户端方法,需要outlook的协作,而SMTP则是服务器端方法,要求SMTP允许AOS服务器通过它中继.这里要讲的就是如何通过SMTP发 ...

  6. ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?" can not work

    ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?" can not work &quo ...

  7. assets中放入中文文件名导致Android Studio编译错误

    一个android项目突然出现编译错误,如下: :app:processDebugResources FAILED FAILURE: Build failed with an exception. * ...

  8. Clappr——开源的Web视频播放器

    巴西著名的门户网站Globo.com(视频播放器),使用的是基于OSMF的Flash组件.在最近几年的发展过程中,Globo为视频平台陆续添加了不少额外功能,例如: 字幕,广告,画中画播放等.然而,由 ...

  9. 使用UIKit制作卡牌游戏（一）ios游戏篇

    转自朋友Tommy 的翻译,自己只翻译了第三篇教程. 译者: Tommy | 原文作者: Matthijs Hollemans写于2012/06/29 原文地址: http://www.raywend ...

  10. SharePoint 2013中以其他用户身份登录的WebPart（免费下载）

    在SharePoint 2013中微软并没有提供在SharePoint 2010中以其他用户身份登录的菜单,这对一般用户影响不大,但对于系统管理员或测试人员或特定人员(如在OA系统中的文员或秘书,常常 ...