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版本的模态框已经验证通过。

  • 相关阅读:
    Python Web框架Django (三)
    谷歌把域名标记为不安全的解决办法
    tkmybatis VS mybatisplus
    jdbc预编译实现方式
    分析mybatis中 #{} 和${}的区别
    实体类id的几种生成方式
    java 获取mac地址
    javafx 表格某一列设置未复选框
    关闭在chrome里使用双指前进后退页面的功能
    调试maven源代码
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/10346096.html
Copyright © 2011-2022 走看看