• placeholder在不同浏览器下的表现及兼容方法


    1、什么是placeholder?

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

    2、placeholder的浏览器兼容性和在不同浏览器下的表现
        由于placeholder是html5的新属性,可想而知,仅支持html5的浏览器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持。
      如果直接写input{color:red;},可以看到,ie10和ff下,placeholder文字和输入文字都变成了红色,

      而在chrome和safari下,placeholder文字颜色不变,只有输入的文字变成红色。

           显然,这种做法是行不通的。因为我们只想改变placeholder文字的颜色,并不想改变输入文字的颜色。
      正确的写法如下:
          ::-moz-placeholder{color:red;}                //ff
          ::-webkit-input-placeholder{color:red;}       //chrome,safari
          :-ms-input-placeholder{color:red;}             //ie10
     

      $(function() {
        // 如果不支持placeholder,用jQuery来完成
        if(!isSupportPlaceholder()) {
          // 遍历所有input对象, 除了密码框
          $('input').not("input[type='password']").each(
            function() {
              var self = $(this);
              var val = self.attr("placeholder");
              input(self, val);
            }
           );
        
          /**//* 对password框的特殊处理
           * 1.创建一个text框
           * 2.获取焦点和失去焦点的时候切换
           */
          $('input[type="password"]').each(
            function() {
              var pwdField    = $(this);  
              var pwdVal      = pwdField.attr('placeholder');  
              var pwdId       = pwdField.attr('id');  
              // 重命名该input的id为原id后跟1
              pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');  
              var pwdPlaceholder = $('#' + pwdId + '1');  
              pwdPlaceholder.show();  
              pwdField.hide();  
              
              pwdPlaceholder.focus(function(){  
                pwdPlaceholder.hide();  
                pwdField.show();  
                pwdField.focus();  
              });  
              
              pwdField.blur(function(){  
                if(pwdField.val() == '') {  
                  pwdPlaceholder.show();  
                  pwdField.hide();  
                }  
              });  
            }
          );
        }
      });

    // 判断浏览器是否支持placeholder属性
    function isSupportPlaceholder() {
      var input = document.createElement('input');
      return 'placeholder' in input;
    }

    // jQuery替换placeholder的处理
    function input(obj, val) {
      var $input = obj;
      var val = val;
      $input.attr({value:val});
      $input.focus(function() {
        if ($input.val() == val) {
          $(this).attr({value:""});
        }
      }).blur(function() {
        if ($input.val() == "") {
                $(this).attr({value:val});
        }
      });
    }

  • 相关阅读:
    分布式系统笔记
    Paxos算法细节详解(一)
    Java G1学习笔记
    Spring Boot 的 10 个核心模块
    k8s 重点
    毕玄:阿里十年,从分布式到云时代的架构演进之路
    netty原理解析
    JVM调优总结(一):基本概念
    《快学 Go 语言》第 16 课 —— 包管理 GOPATH 和 Vendor
    Oracle 检查表空间使用情况
  • 原文地址:https://www.cnblogs.com/gyangfeng/p/6558531.html
Copyright © 2020-2023  润新知