效果：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. 菜鸟教程之工具使用（十）——用BlazeMeter录制JMeter测试脚本

    工具: 1,JMeter 2,Chrome 3,BlazeMeter 4,SwitchyOmega(如果需要代理) 步骤: 以上工具准备好以后就可以录制JMeter的测试脚本了, 在Chrome中点击 ...

  2. select into的不同数据库实现

    DB2中修改表的schema除了通常的创建别名,还可以删除表重建 删除表的顺序应该是先在另一个Schema下新建表,然后使用select ino将原表的数据导入新表,再删除原表. 实现如下: 在Sch ...

  3. 2015.10.14-TransactionScope测试

    测试代码: ; ; List<string> lst = null; Action doSth = () => { using (var db = new TestSystemEnt ...

  4. iOS开发 - AVPlayer实现流音频边播边存

    边播边下有三套左右实现思路,本文使用AVPlayer + AVURLAsset实现. 概述 1. AVPlayer简介 AVPlayer存在于AVFoundation中,可以播放视频和音频,可以理解为 ...

  5. 浅析 mondrian 模式文件 Schema

    1.前言 前面几篇文章一经介绍过saiku.模式文件和MDX的关系.通俗点说模式文件(Schema)就是一个xml,里面定义了一个虚拟立方体,共MDX查询语言使用. 2.模式文件 Schema 最顶层 ...

  6. uniGUI试用笔记（十四）TUniTreeView的CheckBox

    TUniTreeView目前版本没有封装CheckBox功能,所以需要手工处理,幸好0.99版提供部分代码了,修改过程如下: 1.uniGUIAbstractClasses.pas单元中修改基类TUn ...

  7. [英] 推荐 15 个 jQuery 选择框插件

    jQuery Selectbox Plugins let you create beautiful and eye catching select box for your websites inst ...

  8. cordova 学习笔记

    0.sdk安装 http://spring.io/guides/gs/android/ 1.安装(node.js 需要安装https://nodejs.org/) on OS X and Linux: ...

  9. Contractive Auto-Encoder

    本博客已经迁往http://www.kemaswill.com/, 博客园这边也会继续更新, 欢迎关注~ Contractive Autoencoder(CAE)是Bengio等人在2011年提出的一 ...

  10. 跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByClassName

    按照类名获取元素 -- getElementsByClassName(HTML5) 标准 WHATWG 在Document与Element上均有定义,原型 HTMLCollection getElem ...