基于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. HBase 5、Phoenix使用

    1.建表 执行建表语句 $ . ../examples/stock_symbol.sql 其中../examples/stock_symbol.sql是建表的sql语句 CREATE TABLE IF ...

  2. SDP简要解析

    1.概述SDP也是MMUSIC工作组的一个产品,在MBONE内容中用得很多.其目的就是在媒体会话中,传递媒体流信息,允许会话描述的接收者去参与会话.SDP基本上在internet上工作.他定义了会话画 ...

  3. Mac 下纯lua（三）

    文件处理 直接使用io调用 io.close();文件流关闭 io.flush():如果文件流以bufferd缓存模式处理,输入不会立即存入文件,需要调用本函数 io.input(file):输入 i ...

  4. vb.NET基础总结

    vb.NET语言的学习,相对于原来的添加了.net平台,也 是基于对vb学习的继承与扩展,是在面向对象基础上的编程语言,vb中学到的控制语句,主要的数据类型,对象的事件,方法,属性等继续应用于vb.n ...

  5. poj 2446 (二分匹配)

    题意:除了所给的一些点外,问能不能用1*2的矩形覆盖所有的点,矩形间不能重叠. 思路:简单二分匹配,,,,,,, #include<stdio.h> #include<string. ...

  6. nomasp 博客导读：Android、UWP、Algorithm、Lisp（找工作中……

    Profile Introduction to Blog 您能看到这篇博客导读是我的荣幸.本博客会持续更新.感谢您的支持.欢迎您的关注与留言.博客有多个专栏,各自是关于 Android应用开发 .Wi ...

  7. mysql binlog参数设置

    1.mysql有许多系统变量,可以设置,系统变量设置不同,不同的系统将导致执行状态. 故mysql提供两组命令,分别查看系统设置和执行状态. 1.系统设置: SHOW [GLOBAL | SESSIO ...

  8. Android开发最佳学习路线图

          为了帮助大家更好的学习Android开发的相关知识,尚观4G智能操作系统研究室(www.up4g.com)为大家制作下面学习路线图:希望能帮助到广大的android爱好者. 在開始之前我们 ...

  9. nth-child和nth-of-type的区别

    以前一般都用:nth-child,后来知道了:nth-of-type,然后就一般用nth-of-type 它们两有什么区别呢? 首先来看个现象: 假如有这样一个HTML结构 <div class ...

  10. Android使用webService

    在android中使用webservice,首先要导入Android webservice支持包 ksoap2-android-assembly-3.3.0-jar-with-dependencies ...