input placeholder属性IE、360浏览器兼容性问题

效果:http://hovertree.com/texiao/jquery/43/效果二:http://hovertree.com/texiao/jquery/43/1/请在IE中体验。1、创建

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

input placeholder属性IE、360浏览器兼容性问题此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

效果: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>

实践是检验真理的唯一标准,希望能帮助到大家。

参考:http://hovertree.com/h/bjaf/ww7ek8wn.htm

 

http://www.cnblogs.com/roucheng/p/csslogin.html

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120632.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 汉罗塔问题_6层汉诺塔最少步骤

    汉罗塔问题_6层汉诺塔最少步骤Hanoi汉诺塔是一个发源于印度的益智游戏,也叫河内塔。相传它源于印度神话中的大梵天创造的三个金刚柱,一根柱子上叠着上下从小到大64个黄金圆盘。大梵天命令婆罗门将这些圆盘按从小到大的顺序移动到另一根柱子上,其中大圆盘不能放在小圆盘上面。当这64个圆盘移动完的时候,世界就将毁灭。好吧上面这个东西是我直接百度copy的.这个源自孤古印度的游戏,还是有点意思的,也和递归扯上关系.但是我不明白…

    2022年10月12日
  • 2021JavaScript面试题(最新)不定时更新(2021.11.6更新)

    2021JavaScript面试题(最新)不定时更新(2021.11.6更新)介绍JavaScript的数据类型。1.有两种2.分两种展开说JavaScript的数据类型分为俩种,一种是基本数据类型,一种是引用数据类型1.基本数据类型js一共有六种基本数据类型,分别是Undefined、Null、Boolean、Number、String,还有在ES6中新增的Symbol类型。Symbol代表创建后独一无二且不可变的数据类型,它的出现我认为主要是为了解决可能出现的全局变量冲突的问题。2.引用数据类型引用数据类型统称为Object对象,主要包括对象

  • 用数据说话,外贸B2C产品选择(上篇)-热门搜索法

    用数据说话,外贸B2C产品选择(上篇)-热门搜索法

  • 百度指数可以下载吗_百度指数能查一年的数据吗

    百度指数可以下载吗_百度指数能查一年的数据吗大家好我是小小明,今天给大家演示如何使用python直接采集百度指数的数据。百度指数(BaiduIndex)是以百度海量网民行为数据为基础的数据分析平台,它能够能够告诉用户:某个关键词在百度的搜索规模有多大,一段时间内的涨跌态势以及相关的新闻舆论变化,关注这些词的网民是什么样的,分布在哪里,同时还搜了哪些相关的词。百分十先生分享过如何使用uiautomation采集百度指数:百度指数如何批量获取?不过个人感觉这方法好像有点杀鸡用牛刀,对于网页使用selenium完全足以,当然对于专门针对sele

  • asp net mvc 全局捕获异常的方法

    asp net mvc 全局捕获异常的方法在一个网站的开发测试阶段,我们经常需要全局捕获异常。使得网站在异常发生时并不会整个崩掉,从而影响到所有用户的访问,同时记录下异常的详细信息,以便于网站维护人员在异常发生后,可以准确定位异常所在位置和原因。本文使用过滤器的方式来实现全局异常捕获。网上也有很多类似的博文教程,我这里整理了一份日志打印比较完整的。新建过滤器在您的Util项目添加过滤器ExceptionLogAttribute.cs:usingSystem;usingSystem.Web;usingSystem.Web.Mv

  • java protostuff 序列化_使用Protostuff序列化

    java protostuff 序列化_使用Protostuff序列化序rpc调用,有多种序列化的方式,通用如json,mongodb使用的bson;java方面的,比如Java默认的序列化,比如hessian;还有跨语言的,比如thrift、protocolbuf。thrift和pb的好处是序列化后size比较小,但是缺点是得生成java代码,这个挺鸡肋的,所以不管二者运行时效率有多高,开发效率相对比较低的。像hessian,是有一些在用,但是感觉不如pb那样强大…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号