zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    python实训day8
    python实训day7
    python实训day6
    python实训day5
    python实训day4
    python实训day3
    python实训day2
    python实训day1
    MyBatis入门-insert标签介绍及使用
    Shell入门-Shell脚本开发规范
  • 原文地址:https://www.cnblogs.com/jingjing-blog/p/8177530.html
Copyright © 2011-2022 走看看