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">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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版本的模态框已经验证通过。
Bootstrap3 模态框 select2搜索框无法输入的更多相关文章
- Bootstrap 模态框 select2搜索框无法输入
去掉模态框的div中的 tabindex="-1" 这个属性 <div class="modal fade" role="dialog" ...
- 在BootStrap的modal中使用Select2搜索框无法输入
用modal来show一个对话框 dialog.modal({ backdrop:true, keyboard:true, show:true }); 1 2 3 4 5 然后再modal中初始化se ...
- select2搜索框查询加遍历
<div class="form-group"> <label class="control-label col-sm-1 no-padding-rig ...
- yii2 shi用modal弹窗 select2搜索框无法使用
在modal使用begin的时候指定options选项的tabindex为false Modal::begin([ // ...... 'options' => [ 'tabindex' =&g ...
- js之搜索框
目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息. 代码如下: <!DOCTYPE htm ...
- React后台管理系统-商品列表搜索框listSearch组件
1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap"> <div classN ...
- extjs在窗体中添加搜索框
在extjs中添加搜索框,搜索框代码如下: this.searchField = new Ext.ux.form.SearchField({ store : this.store ...
- Android UI(五)云通讯录项目之联系人列表,带侧滑选择,带搜索框
作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]h ...
- 开发手机APP过程,不同使用场景APP搜索框的样式及区别
搜索框是 app 内最常见的控件之一,可以帮助用户快速又精准找到期望的内容与功能.不同的使用场景下,根据页面中搜索的重要程度,搜索框也有着不同的样式. 下面就常州开发APP公司和大家聊聊常见的四种样式 ...
随机推荐
- Elasticsearch通关教程(五):如何通过SQL查询Elasticsearch
前言 这篇博文本来是想放在全系列的大概第五.六篇的时候再讲的,毕竟查询是在索引创建.索引文档数据生成和一些基本概念介绍完之后才需要的.当前面的一些知识概念全都讲解完之后再讲解查询是最好的,但是最近公司 ...
- Java的selenium代码随笔(3)
/** 以下方法主要用于切换页面*/public void SetPageSwitch(String pageTitle) {Set<String> allWindowsHandles = ...
- 磁盘IO的性能指标 阻塞与非阻塞、同步与异步 I/O模型
磁盘IO的性能指标 - 蝈蝈俊 - 博客园https://www.cnblogs.com/ghj1976/p/5611648.html 阻塞与非阻塞.同步与异步 I/O模型 - 蝈蝈俊.net - C ...
- Python进阶3---python类型注解、functools
函数定义的弊端 函数注解Function Annotations 业务应用 inspect模块 #示例 import inspect def add(x,y:int,*args,**kwargs) - ...
- vscode在vue-cli中按照ESlint自动格式化代码
先安装 1 npm i -S eslint-plugin-vue .eslintrc下 1 2 3 "plugins": [ "vue" ] vscod ...
- 【C/C++】任意进制转换
进制转换:R进制->10进制:10进制->R进制. #include<bits/stdc++.h> using namespace std; /*函数:r进制转换成10进制*/ ...
- SpringCloud 过滤器
在网关中配置过滤器 验证签名 package com.kps.zuul.filter; import com.kps.common.BodyReaderHttpServletRequestWrappe ...
- [洛谷P1438] 无聊的数列
题目类型:差分,线段树 传送门:>Here< 题意:给出一个数列,每次给一个区间对应的加上一个等差数列,并询问某一个元素目前的值. 解题思路 所谓差分,我个人的理解就是用\(O(1)\)的 ...
- windows本地配置php(yii)+nginx+fastcgi
一. 配置nginx支持php 官网下载nginx. nginx.conf配置做如下更改: # yii框架 server { charset utf-8; client_max_body_size 1 ...
- Node.js修改全局安装默认路径
因为苦于C盘不够的烦恼,不想把全局安装包的路径弄在C盘,于是有了这篇文章: 查看设置 npm config ls //查看设定信息,,找到prefix一行,默认是一般是在C盘 修改命令如下 npm c ...