element-ui select可搜索下拉框无法在IOS或Ipad调起小键盘输入法
参考:https://segmentfault.com/q/1010000021748033
原因:常规select是可以调起小键盘的。但是element-ui的select其实是input。并且这个input里面有个readonly属性,这个属性导致无法调起ios小键盘。在安卓上是没问题的
我们可以查看源码
经网络各路大神的指引,我们可以在每次获取焦点和失去焦点的时候把readonly干掉。目前发现这个方法是可行的
操作:
<el-select
v-if="showAgents"
ref="agentSelect" // 1.定义ref
v-model="agents"
:multiple="showAgentsMultiple"
clearable
filterable
placeholder="选择"
@hook:mounted="cancalReadOnly" // 2.定义事件
@visible-change="cancalReadOnly" // 3.定义事件
>
<el-option v-for="item in agentsOptions" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
methods方法体里面定义方法
cancalReadOnly(onOff) {
this.$nextTick(() => {
if (!onOff) {
const Selects = this.$refs
console.log(Selects)
// 如果只有1个下拉框,这段就足够了---start
if (Selects.agentSelect) {
const input = Selects.agentSelect.$el.querySelector('.el-input__inner')
input.removeAttribute('readonly')
}
// 如果只有1个下拉框,这段就足够了---end
// 如果有多个,就加多几个,代码可以优化,我懒了
if (Selects.agent2Select) {
const appinput = Selects.appSelect.$el.querySelector('.el-input__inner')
appinput.removeAttribute('readonly')
}
if (Selects.agent3Select) {
const gameinput = Selects.gameSelect.$el.querySelector('.el-input__inner')
gameinput.removeAttribute('readonly')
}
}
})
element-ui select可搜索下拉框无法在IOS或Ipad调起小键盘输入法的更多相关文章
- layui-table-column-select(layui数据表格可搜索下拉框select)
layuiTableColumnSelect 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/yangqianlong9 ...
- selenium处理select标签的下拉框
有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select ...
- ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug
前几天做一个react的项目的时候需要用一个可搜索的下拉框ComboBox,上代码: <ComboBox // className={comboxClassName} items={storeA ...
- jquery美化select,自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
- Combo Select – jQuery可搜索下拉框插件
今天用到另一款jq插件..插件就是无脑,,引入相关文件,开始撸吧 引入相关文件: <link href="~/Scripts/combo-select/combo.select.css ...
- Selenium:利用select模块处理下拉框
在利用selenium进行UI自动化测试过程中,经常会遇到下拉框选项,这篇博客,就介绍下如何利用selenium的Select模块来对标准select下拉框进行操作... 首先导入Select模块: ...
- Selenium: 利用select模块操作下拉框
在利用selenium进行UI自动化测试过程中,经常会遇到下拉框选项,这篇博客,就介绍下如何利用selenium的Select模块来对标准select下拉框进行操作... 首先导入Select模块: ...
- 手把手教学~基于element封装tree树状下拉框
在日常项目开发中,树状下拉框的需求还是比较常见的,但是element并没有这种组件以供使用.在这里,小编就基于element如何封装一个树状下拉框做个详细的介绍. 通过这篇文章,你可以了解学习到一个树 ...
- 前端 HTML form表单标签 select标签 option 下拉框
<select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...
随机推荐
- 技术分享 | MySQL数据误删除的总结
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 内容提要 用delete语句 使用drop.truncate删除表以及drop删 ...
- Apache DolphinScheduler 2.X保姆级源码解析,中国移动工程师揭秘服务调度启动全流程
2022年1月,科学技术部高新技术司副司长梅建平在"第六届中国新金融高峰论坛"上表示,当前数据量已经大大超过了处理能力的上限,若信息技术仍然是渐进式发展,则数据处理能力的提升将远远 ...
- Taurus.MVC 微服务框架 入门开发教程:项目部署:4、微服务应用程序发布到Docker部署(上)。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 开源地址:https://github.com/cyq1162/Taurus.MVC 本系列第一篇:Tauru ...
- 1.4_HTML的标签简介
HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag). HTML 标签是由尖括号包围的关键词,比如 <html> HTML 标签通常是成对!出现的,比如 &l ...
- 【python】一些python用法规律笔记
作为本科用了多年MATLAB的工科生,学起来python有些似曾相识但也有些不习惯的地方. 在这里总结一下,慢慢整理,希望能巩固python语法 一.前闭后开 这个是和MATLAB很大不同.不论是ra ...
- Javaweb___Jquery高级
今日内容: 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. sh ...
- C语言小游戏:贪吃蛇
#include <graphics.h> #include <conio.h> #include <stdio.h> #define WIDTH 40 //设置宽 ...
- KingbaseES V8R6C6备份恢复案例之---单实例sys_baackup.sh备份
案例说明: KingbaseES V8R6C6中sys_backup.sh在通用机单实例环境,默认需要通过securecmdd工具以及kingbase和root用户之间的ssh互信,执行备份初始化(i ...
- KingbaseES 全文检索功能介绍
KingbaseES 内置的缺省的分词解析器采用空格分词,因为中文的词语之间没有空格分割,所以这种方法并不适用于中文.要支持中文的全文检索需要额外的中文分词插件:zhparser and sys_ji ...
- centos7部署Prometheus+Grafana
一.安装Prometheus Server 请从 Prometheus 官方下载 linux 版的二进制压缩包.注意在下载前要选择操作系统为 linux. 执行下面的命令把 prometheus se ...