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 相关文章推荐
PassWord输入框代码分享
Jun 07 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 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
paypal即时到账php实现代码
2010/11/28 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
python strip()函数 介绍
2013/05/24 Python
Python验证企业工商注册码
2015/10/25 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
python后端接收前端回传的文件方法
2019/01/02 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
详解Python sys.argv使用方法
2019/05/10 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
Python如何对XML 解析
2020/06/28 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
地震捐款简报
2015/07/21 职场文书
认识实习感想
2015/08/10 职场文书
python析构函数用法及注意事项
2021/06/22 Python