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


Posted in Javascript onJanuary 31, 2015

很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框。

placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失。

下载地址:http://xiazai.3water.com/201501/other/placeholderfriend.rar

实现代码如下:

(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>

<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>
Javascript 相关文章推荐
JavaScript与函数式编程解释
Apr 27 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 #Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 #Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 #Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 #Javascript
JavaScript实现的双向跨域插件分享
Jan 31 #Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 #Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 #Javascript
You might like
CodeIgniter基本配置详细介绍
2013/11/12 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
javascript实现留言板功能
2020/02/08 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
Python探索之创建二叉树
2017/10/25 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python语音识别实践之百度语音API
2018/08/30 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
sklearn的predict_proba使用说明
2020/06/28 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
企业后勤岗位职责
2014/02/28 职场文书
广播体操比赛口号
2014/06/10 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
放牛班的春天观后感
2015/06/01 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
护士心得体会范文
2016/01/25 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript
java代码实现空间切割
2022/01/18 Java/Android