(function($) {
  var placeholderfriend = {
    focus: function(s) {
      s = $(s).hide().prev().show().focus();
      var idValue = s.attr("id");
      if (idValue) {
        s.attr("id", idValue.replace("placeholderfriend", ""));
      }
      var clsValue = s.attr("class");
      if (clsValue) {
        s.attr("class", clsValue.replace("placeholderfriend", ""));
      }
    }
  }

//判断是否支持placeholder
  function isPlaceholer() {
    var input = document.createElement('input');
    return "placeholder" in input;
  }
  //不支持的代码
  if (!isPlaceholer()) {
    $(function() {

var form = $(this);
      var elements = form.find("input[type='text'][placeholder]");
      elements.each(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
          var sValue = s.val();
        if (pValue) {
          if (sValue == '') {
            s.val(pValue).css('color','#E0E0E0');
          }
        }
      });

elements.focus(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
        var sValue = s.val();
        if (sValue && pValue) {
          if (sValue == pValue) {
            s.val('').css('color','#E0E0E0');
          }
        }
      });

elements.blur(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
        var sValue = s.val();
        if (!sValue) {
          s.val(pValue);
        }
      });

var element_em = form.find("input[type='email'][placeholder]");
      element_em.each(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
      var sValue = s.val();
        if (pValue) {
          if (sValue == '') {
            s.val(pValue).css('color','#E0E0E0');
          }
        }
      });

element_em.focus(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
    var sValue = s.val();
        if (sValue && pValue) {
          if (sValue == pValue) {
            s.val('').css('color','#E0E0E0');
          }
        }
      });

element_em.blur(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
    var sValue = s.val();
        if (!sValue) {
          s.val(pValue);
        }
      });

var elementsPass = form.find("input[type='password'][placeholder]");
      elementsPass.each(function(i) {
        var s = $(this);
        var pValue = s.attr("placeholder");
        var sValue = s.val();
        s.val(sValue).css('color','#e0e0e0');
        if (pValue) {
          if (sValue == '') {
            var html = this.outerHTML || "";
            html = html.replace(/\s*type=(['"])?password\1/gi, " type=text placeholderfriend").replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ").replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue + "' " + "onfocus='placeholderfriendfocus(this);' ");
            var idValue = s.attr("id");
            if (idValue) {
              s.attr("id", idValue + "placeholderfriend");

}
            var clsValue = s.attr("class");
            if (clsValue) {
              s.attr("class", clsValue + "placeholderfriend");
            }
            s.hide();
            s.after(html);
          }
        }
      });

elementsPass.blur(function() {
        var s = $(this);
        var sValue = s.val();
        if (sValue == '') {
          var idValue = s.attr("id");
          if (idValue) {
            s.attr("id", idValue + "placeholderfriend");
          }
          var clsValue = s.attr("class");
          if (clsValue) {
            s.attr("class", clsValue + "placeholderfriend");
          }
          s.hide().next().show();
        }
      });

});
  }
  window.placeholderfriendfocus = placeholderfriend.focus;
})(jQuery);

IE6\7\8下placeholder效果,支持文本框和密码框的更多相关文章

  1. JAVA 文本框、密码框、标签

    //文本框,密码框,标签 import java.awt.*; import javax.swing.*; public class Jiemian5 extends JFrame{ JPanel m ...

  2. IE下支持文本框和密码框placeholder效果的JQuery插件

    基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...

  3. WPF 之 文本框及密码框添加水印效果

    1.文本框添加水印效果 文本框水印相对简单,不需要重写模板,仅仅需要一个 VisualBrush 和触发器验证一下Text是否为空即可. <TextBox Name="txtSerac ...

  4. spring mvc:常用标签库(文本框,密码框,文本域,复选框,单选按钮,下拉框隐藏于,上传文件等)

    在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...

  5. 表单form的属性,单行文本框、密码框、单选多选按钮

    基础表单结构: <body> <h1> <hr /> <form action="" name="myFrom" en ...

  6. 模拟placeholder支持ie8以下处理了密码框只读的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. IE中input标签密码框与文本框宽度不一样问题

    前言 在项目登录界面中有账户和密码的输入框,在Chrome中显示是正常的(本人使用的是Chrome浏览器,平时不用IE).等部署到客户的服务器上,访问时发现一个问题,在IE浏览器中文本框与密码框的宽度 ...

  8. jQuery效果之封装模拟placeholder效果,让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  9. opacity在IE6~8下无效果,解决的办法

    opacity在IE6~8下无效果,解决的办法 问题出现时rgba()在ie6下不出效果,最后查到是opacity的问题. opacity是css3时出现的,目前主流浏览器都支持.but老IE是个麻烦 ...

随机推荐

  1. Integer.valueof(String s)和Integer.parseInt(String s)的具体区别是什么?

    Integer.valueof(String s)和Integer.parseInt(String s)的具体区别是什么? Integer.valueof(String s)是将一个包装类是将一个实际 ...

  2. Xdebug文档(三)堆栈跟踪

    当xdebug激活时,PHP一旦要显示通知.警告或错误时,xdebug 显示堆栈跟踪信息.这个堆栈信息能跟据你的需要来配置显示. Xdebug显示的堆栈跟踪都是以保守数量状态显示信息.因为大量的信息处 ...

  3. 使用javascript生成的植物显示过程特效

    查看效果:http://keleyi.com/keleyi/phtml/html5/33.htm .NET版本:http://keleyi.com/a/bjac/66mql4bc.htm 完整HTML ...

  4. 标准BST二叉搜索树写法

    本人最近被各种数据结构的实验折磨的不要不要的,特别是代码部分,对数据结构有严格的要求,比如写个BST要分成两个类,一个节点类,要给树类,关键是所以操作都要用函数完成,也就是在树类中不能直接操作节点,需 ...

  5. iOS tableView右滑显示选择

    如何使用UITableViewRowAction实现右滑选择呢? 1.在iOS8以前,我们实现tableview中滑动显示删除,置顶,更多等等的按钮时,都需要自己去实现,在iOS8中系统已经写好了,只 ...

  6. 长链接转换成短链接(iOS版本)

    首先需要将字符串使用md5加密,添加NSString的md5的类别方法如下 .h文件 #import <CommonCrypto/CommonDigest.h> @interface NS ...

  7. ASP.NET MVC中Unobtrusive Ajax的妙用

    Unobtrusive Javascript有三层含义:一是在HTML代码中不会随意的插入Javsscript代码,只在标签中加一些额外的属性值,然后被引用的脚本文件识别和处理:二是通过脚本文件所增加 ...

  8. angularjs结合d3js实现资源展示

    转载请注明出处: 转载自Bin's Blog:  angularjs & d3 实现资源展示( http://www.wenbin.cf/post/27/ ) angularjs结合d3js实 ...

  9. RedHat Linux RHEL6配置本地YUM源

    YUM是Yellow dog Updater Modified的简称,起初是由yellow dog这一发行版的开发者Terra Soft研发,用python写成,那时还叫做yup(yellow dog ...

  10. Linux IPC udp/tcp/UNIX域 socket编程

    UNIX域套接字本地通信即在socket第一个参数中选择AF_LOCAL,socket是BSD提出的一种适用于所有的情况的进程间通信的方式,虽然现在多用于网络通信,但是本机内的进程间通信也是没有问题的 ...