zoukankan      html  css  js  c++  java
  • IE678下placeholder效果,支持文本框和密码框

    (function($) {
      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);
          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).css('color','#E0E0E0');
              }
            }
          });

          elements.focus(function() {
            var s = $(this);
            var pValue = s.attr("placeholder");
            var sValue = s.val();
            if (sValue && pValue) {
              if (sValue == pValue) {
                s.val('').css('color','#E0E0E0');
              }
            }
          });

          elements.blur(function() {
            var s = $(this);
            var pValue = s.attr("placeholder");
            var sValue = s.val();
            if (!sValue) {
              s.val(pValue);
            }
          });

          var element_em = form.find("input[type='email'][placeholder]");
          element_em.each(function() {
            var s = $(this);
            var pValue = s.attr("placeholder");
          var sValue = s.val();
            if (pValue) {
              if (sValue == '') {
                s.val(pValue).css('color','#E0E0E0');
              }
            }
          });

          element_em.focus(function() {
            var s = $(this);
            var pValue = s.attr("placeholder");
        var sValue = s.val();
            if (sValue && pValue) {
              if (sValue == pValue) {
                s.val('').css('color','#E0E0E0');
              }
            }
          });

          element_em.blur(function() {
            var s = $(this);
            var pValue = s.attr("placeholder");
        var sValue = s.val();
            if (!sValue) {
              s.val(pValue);
            }
          });

          var elementsPass = form.find("input[type='password'][placeholder]");
          elementsPass.each(function(i) {
            var s = $(this);
            var pValue = s.attr("placeholder");
            var sValue = s.val();
            s.val(sValue).css('color','#e0e0e0');
            if (pValue) {
              if (sValue == '') {
                var html = this.outerHTML || "";
                html = html.replace(/s*type=(['"])?password1/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);

  • 相关阅读:
    常见问题
    查询
    多对多关系
    prototype & __proto__
    new operator
    用户
    express.Router
    Express 应用生成器
    LeanCloud
    npm常用命令
  • 原文地址:https://www.cnblogs.com/smivico/p/5170266.html
Copyright © 2011-2022 走看看