zoukankan      html  css  js  c++  java
  • Bootstrap3 模态框 select2搜索框无法输入

    <div class="modal fade" role="dialog" aria-hidden="true" data-backdrop="static">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>One fine body&hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    用modal来show一个对话框 

    dialog.modal({ 
        backdrop:true, 
        keyboard:true, 
        show:true 
    }); 

    然后再modal中初始化select2 

    dialog.find("select").select2({ 
       formatNoMatches: function() { 
           return "没有选项"; 
       }, 
       placeholder: "请选择...", 
       minimumResultsForSearch: 0, 
       allowClear: false 
    }); 


    这时候select2的搜索框无法输入,一般有两方面的原因 
    1.检查下modal的div中是否有tabindex=”-1”,这个属性 

    <div class="modal fade in" id="dialog-new-draft"> 

    2.js代码中加入 

    $.fn.modal.Constructor.prototype.enforceFocus = function () {};

    在本文中的模态框是bootstrap的模态框,目前3版本的模态框已经验证通过。

  • 相关阅读:
    IIS禁止xml文件访问
    微信三方授权域名问题
    微信公众号接收推送
    微信菜单保存
    微信三方授权 二维码获取问题 以及网页显示问题
    控制input框的内容输入为数字
    select 相关 获取当前项以及option js选定
    子窗口调用父窗口方法
    免费在线的web性能测试网站
    【原创】Kakfa utils源代码分析(三)
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/10346096.html
Copyright © 2011-2022 走看看