• IE9及以下兼容placeholder


    在input输入框中使用placeholder,可以给用户起到提醒或指引的作用,但是IE9及以下的IE版本都不支持placeholder,故在此给出一些解决方法:

    1. 使用value来代替(做非空判断时需要排除值等于placeholder值的情况)
    2. 添加标签(需注意如何触发事件)
    3. 引用现成插件 jquery.placeholder.min.js(请自行搜索下载,此处就不多说了)

    不管用哪种方法,我们都要先判断浏览器是否不支持placeholder,不支持的时候我们才需要处理

    function placehSupport() {
       return 'placeholder' in document.createElement('input')  ;
    }

    1.

    <body>
        <input id="title" type="text" placeholder="请输入标题">
    <script src="jquery-1.11.3.js"></script>
    <script>
        $(function(){
            function placehSupport() {
                return 'placeholder' in document.createElement('input');
            }    
            if(!placehSupport){  // 判断浏览器是否支持 placeholder
          var placeVal = $('input#title').attr('placeholder'); 
          $(
    'input#title').val(placeVal);
          $(
    'input#title').focus(function(){
            
    if($.trim($('input#title').val())==placeVal ) {
              $(
    'input#title').val('');
            }
          });
          input.blur(function(){
            
    if($.trim($('input#title').val())=='') {
               $('input#title').val(placeVal );
             } }); } });
    </script>
    </body>
    
    

    2.

    <body>
    <div class="input-box">
        <input class="input1" type="text" placeholder="请输入标题">
    </div>
    <div class="input-box">
        <input class="input2" type="text" placeholder="请输入文章">
    </div>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function placeholderSupport() {
            return 'placeholder' in document.createElement('input');
        }
        if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
            $("input[placeholder]").each(function(){
                var _this = $(this);
                var left = _this.css("padding-left");
                _this.parent().append('<span class="placeholder" data-type="placeholder" style="left: '+left+'">'+_this.attr("placeholder")+'</span>');
                if(_this.val() != ""){
                    _this.parent().find("span.placeholder").hide();
                }
                else{
                    _this.parent().find("span.placeholder").show();
                }
            }).on("focus", function(){
                $(this).parent().find("span.placeholder").hide();
            }).on("blur", function(){
                var _this = $(this);
                if(_this.val() != ""){
                    _this.parent().find("span.placeholder").hide();
                }
                else{
                    _this.parent().find("span.placeholder").show();
                }
            });
            // 点击表示placeholder的标签相当于触发input
            $("span.placeholder").on("click", function(){
                $(this).hide();
                $(this).siblings("[placeholder]").trigger("click");
                $(this).siblings("[placeholder]").trigger("focus");
            });
        }
    })
    </script>
    </body>
  • 相关阅读:
    显示所有销售订单
    从 “香农熵” 到 “告警降噪” ,如何提升告警精度?
    KubeDL 0.4.0 Kubernetes AI 模型版本管理与追踪
    链路分析 K.O “五大经典问题”
    让容器跑得更快:CPU Burst 技术实践
    All in one:如何搭建端到端可观测体系
    【视频特辑】提效神器!如何用Quick BI高效配置员工的用数权限
    一文说清linux system load
    Flow vs Jenkins 实操对比,如何将Java应用快速发布至ECS
    实时数仓Hologres首次走进阿里淘特双11
  • 原文地址:https://www.cnblogs.com/jingjing-blog/p/8177530.html
Copyright © 2020-2023  润新知