基于jQuery实现的，主要用于IE下实现placeholder效果，可同时支持文本和密码输入框。placeholder是HTML5新增的一个属性，当input设置了该属性后，该值的内容将作为灰色提示显示在文本框中，当文本框获得焦点时，提示文字消失。

实现代码如下：

(function($) {
  /**
   * 没有开花的树
   * 2012/11/28 15:12
   */

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);

//遍历所有文本框，添加placeholder模拟事件
      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);
          }
        }
      });

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

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

//遍历所有密码框，添加placeholder模拟事件
      var elementsPass = form.find("input[type='password'][placeholder]");
      elementsPass.each(function(i) {
        var s = $(this);
        var pValue = s.attr("placeholder");
  var sValue = s.val();
        if (pValue) {
          if (sValue == '') {
            //DOM不支持type的修改，需要复制密码框属性，生成新的DOM
            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);

使用很简单，html代码如下：

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="placeholderfriend.js" type="text/javascript"></script>
</head>
<body>
<input placeholder="账号/手机号码" ><br>
<input placeholder="密码" type="password" >
</body>
</html>

IE下支持文本框和密码框placeholder效果的JQuery插件的更多相关文章

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

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

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

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

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

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

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

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

  5. IE6\7\8下placeholder效果，支持文本框和密码框

    (function($) {  var placeholderfriend = {    focus: function(s) {      s = $(s).hide().prev().show() ...

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

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

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

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

  8. jquery更改输入框type为密码框password

    很蛋疼的一个问题: <input type="text" id="e1" value="123" /> 用juqery将文本框变 ...

  9. WPF文本框密码框添加水印效果

    WPF文本框密码框添加水印效果 来源: 阅读:559 时间:2014-12-31 分享: 0 按照惯例,先看下效果 文本框水印 文本框水印相对简单,不需要重写模板,仅仅需要一个VisualBrush ...

随机推荐

  1. js点击事件防止用户重复点击执行

    点击事件里给button标签加一个自定义属性,存上次点击时间 追问: 求详细代码,JS 真心的没怎么做过 追答:   <input type="button" id=&quo ...

  2. javax.mail用smtp服务器发送带附件的邮件

    jar包: javax.mail-1.5.5.jar maven配置: <dependency> <groupId>com.sun.mail</groupId> & ...

  3. IOS Xmpp的Iq发送和解析之请求讨论组成员

    #pragma mark - 获取讨论组成员 - (void)getDiscussionMemberInfoWithSendIq:(discussionModel *)data { NSXMLElem ...

  4. c++引擎开发

    MyMap.erase(Itor++); //在windows下也可以Itor = MyMap.erase(Itor),但是在linux下不行. 一个是把指针定为const .就是不能修改指针.也就是 ...

  5. BestCoder Round #14 B 称号 Harry And Dig Machine 【TSP】

    称号:Harry And Dig Machine 哈哈  最终涨边粉色了,不easy呀.顺便写一道题解吧 题意:给一个m*n的矩阵,然后当中最多由10个有值,求总左上角把全部的值都拿上回到左上角的最小 ...

  6. （续）检测到有潜在危险的 Request.Form 值

    继续昨天的问题“检测到有潜在危险的 Request.Form 值”,前面说如果不想取消数据验证那怎么避免这个问题. 既然是数据验证到危险值然后报错那么我们可不可以在验证的中间做一个处理让他不报错,比如 ...

  7. 使用Jquery UI 高仿百度搜索下拉列表功能

    最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果: 实现这个功能,直接使用了JQuery UI 插件 目前我使用的实现版本是: 网友可以 ...

  8. UVA 10806 Dijkstra, Dijkstra.

    题意: 从起点走到终点,然后从终点走到起点,其中不能同时走过相同的一条边,问你最小路径长度.先输入终点n,起点为1,接下来输入m,代表有m条边.每条边由起点,终点,长度组成. 分析: 求最小长度,还限 ...

  9. hdu2309ICPC Score Totalizer Software

    Problem Description The International Clown and Pierrot Competition (ICPC), is one of the most disti ...

  10. 分享一个手机端好用的jquery ajax分页类

    分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...