基于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. Segment（技巧 相乘转换成相加 + java）

     Segment Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  2. 浅谈ThreadPool 线程池

    本文来自:http://www.cnblogs.com/xugang/archive/2010/04/20/1716042.html 相关概念: 线程池可以看做容纳线程的容器: 一个应用程序最多只能有 ...

  3. 数据库的优化tips

    数据库   TIPS:: 1.用于记录或者是数据分析的表创建时::使用Id作为主键,1,2,3...表示消息条数.用户账号id用于做外键.一个用户相应唯一个accountId             ...

  4. iOS安全攻防（二十三）：Objective-C代码混淆

    iOS安全攻防(二十三):Objective-C代码混淆 class-dump能够非常方便的导出程序头文件,不仅让攻击者了解了程序结构方便逆向,还让着急赶进度时写出的欠完好的程序给同行留下笑柄. 所以 ...

  5. UVA 246 - 10-20-30 (模拟+STL)

    UVA 246 - 10-20-30 题目链接 题意:给52张的扑克堆,先从左往右发7张牌,之后连续不断从左往右发7张牌,假设有牌堆形成了下面3种情况(按顺序推断): 1.头两张+尾一张和为10或20 ...

  6. 把Storyboard减轻的方法

    把Storyboard减轻的方法 by 伍雪颖 UIViewController *secondStoryboard = [[UIStoryboard storyboardWithName:@&quo ...

  7. 启动tomcat后struts框架报异常严重: Exception starting filter struts2 Unable to load configuration. - Class: java.net.PlainSocketImpl

    今天刚好宿舍断网,打开电脑,打开ide工具,启动tomcat后,访问web项目工程,页面显示404,查看控制台,运行报错信息如下: 严重: Exception starting filter stru ...

  8. Hacker（五）----黑客专用通道--->端口

    计算机中,端口是计算机与外部进行通信交流的出口.计算机本身携带的物理端口(键盘.鼠标.显示器等输入/输出接口)已经无法满足网络通信的要求,因此TCP/IP协议就引入了一种称为Socket的应用程序接口 ...

  9. [裸KMP][HDU1711][Number Sequence]

    题意 找到子串在母串出现的第一个位置 解法 裸的KMP 特别的地方 第一次不看模板自己敲的KMP #include<stdio.h> const int maxn=100000; cons ...

  10. apache 日志中记录代理IP以及真实客户端IP

    vim /usr/local/apach2/conf/httpd.conf 默认情况下log日志格式为:LogFormat "%h %l %u %t \"%r\" %&g ...