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

小鱼儿 2021-09-11 01:42 211阅读 0赞

因为在ie8上不支持input的placeholder属性，查询了好久，发现了一款测试ok的插件拿来分享。

小弟已经上传资源供大家下载使用没有兑换积分

下载链接 http://download.csdn.net/detail/ooooooobh/9620520

原创文章如下（http://www.jb51.net/article/60599.htm）

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

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

下载地址：[http://xiazai.jb51.net/201501/other/placeholderfriend.rar][http_xiazai.jb51.net_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  
              + "' " + "οnfοcus='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>

//注意以下插件可以自行下载。

<script src="jquery.js" type="text/javascript"></script>

[http_xiazai.jb51.net_201501_other_placeholderfriend.rar]: http://xiazai.jb51.net/201501/other/placeholderfriend.rar

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery.autoComplete文本框查询自动补全插件支持中文

<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Auto

港控/mmm°/ 2024年02月17日 14:52/ 0 赞/ 78 阅读

相关分享30个最佳 jQuery Lightbox 效果插件

Lightbox 应该是最流行的图片浏览效果了，常具有功能包括：自动根据窗口的大小缩放图片，模式窗口，幻灯片方式播放，内容预加载，渐变等效果。Web开发者们模仿 Lightbo

布满荆棘的人生/ 2022年09月19日 05:23/ 0 赞/ 14 阅读

相关基于jQuery下拉选择框插件支持单选多选

由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui，先贴出主要代码 /

小咪咪/ 2022年08月23日 04:49/ 0 赞/ 263 阅读

相关让IE支持placeholder属性

placeholder 属性提供可描述输入字段预期值的提示信息该提示会在输入字段为空时显示，并会在字段获得焦点时消失。但placeholder不支持IE10以下版本

Love The Way You Lie/ 2022年08月19日 02:15/ 0 赞/ 352 阅读

相关 jquery input placeholder支持兼容ie7，ie8

<input type="text" placeholder="搜索产品名称"/> <input type="password" placeholder="密码

谁践踏了优雅/ 2022年07月14日 14:55/ 0 赞/ 270 阅读

相关 jquery input placeholder支持兼容ie7，ie8

<input type="text" placeholder="搜索产品名称"/> <input type="password" placeholder="密码

ゞ浴缸里的玫瑰/ 2022年07月14日 14:55/ 0 赞/ 335 阅读

相关 jQuery 插件：下拉框控件（select2）

官网：[https://select2.org/][https_select2.org] 官网例子：[http://select2.github.io/select2/in

Myth丶恋晨/ 2022年05月28日 03:38/ 0 赞/ 1081 阅读

相关解决IE不支持placeholder

一.解决方法 / jQuery placeholder, fix for IE6,7,8,9 / var JPlaceHolder =

待我称王封你为后i/ 2022年05月14日 01:37/ 0 赞/ 631 阅读

相关 JavaWeb 解决jsp不支持placeholder，IE不支持placeholder

一、介绍 placeholder是H5的属性，但是在jsp中，兼容性并不好，很多时候，不起作用，尤其是在IE浏览器中。在开发中，placeholder所体现的功能属性

Bertha 。/ 2022年04月18日 04:29/ 0 赞/ 681 阅读

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

因为在ie8上不支持input的placeholder属性，查询了好久，发现了一款测试ok的插件拿来分享。小弟已经上传资源供大家下载使用没有兑换积分下载链接 htt

小鱼儿/ 2021年09月11日 01:42/ 0 赞/ 212 阅读