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>
  • 相关阅读:
    c++继承中的内存布局
    函数调用的原理4点:函数产生名不同,压栈顺序不同,不应由客户清理,客户清理则可执行文件大小更大(许多参考文章,有汇编解释)
    黑马程序员:Java基础总结----JavaBean 内省
    汇编语言理解指针(指针就是汇编的间接寻址,其实就是一个简单方便的运算指令,计算完毕直接就赋值,不是从内存中去取值后赋值)
    设计项目时候的几个小标记
    SendTextMessage如何打开记事本并显示指定内容
    汇编语言---call和ret指令
    汇编语言转移指令规则汇总
    SharePoint Access Service-PowerShell
    对所有CPU寄存器的简述(16位CPU14个,32位CPU16个)
  • 原文地址:https://www.cnblogs.com/jingjing-blog/p/8177530.html
Copyright © 2011-2022 走看看