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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
有效提高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
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
Node.js实现简单聊天服务器
2014/06/20 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
对pandas中Series的map函数详解
2018/07/25 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python 使用shutil复制图片的例子
2019/12/13 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
python利用faker库批量生成测试数据
2020/10/15 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
车间主任岗位职责
2014/03/16 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
行政求职信
2014/07/04 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python