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

  • 相关阅读:
    hitb2017 sentosa writeup
    linux下system函数的简单分析
    深入Linux内核架构-虚拟文件系统-脑图
    深入Linux内核架构-进程虚拟内存-脑图
    深入Linux内核架构-进程间通信
    BCTF 2017 babyuse
    深入Linux内核架构-内存管理-脑图
    深入Linux内核架构-进程管理和调度-脑图
    zctf-2017-pwn-sandbox
    Node.js学习(3)-用express改写留言本
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/10346096.html
Copyright © 2011-2022 走看看