el-select 无法唤起 ios 键盘

究其原因就是因为ios的延时机制,导致键盘还未唤起,就关闭键盘了。

<el-select 
	ref='select'
	@focus="closeReadOnly"
	@hook:mounted="closeReadOnly"
    @visible-change="closeReadOnly"
></el-select>

js:
closeReadOnly(val) {
   this.$nextTick(() => {
     if (!val) {
       const input = this.$refs.search.$el.querySelector('.el-input__inner')
       const timer = setTimeout(() => {
           input.removeAttribute('readonly')
           clearTimeout(timer)
        }, 200)
     }
   })
 }
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
El-selectElement-UI 的一种下拉选择组件,支持远程搜索和自定义筛选。对于需要进行远程搜索的 el-select,我们可以通过绑定键盘事件来方便地进行筛选。 在 el-select 中,我们可以通过绑定 input 事件来实现搜索功能。每次输入文字时,都会请求远程服务器获取符合条件的选项数据。但对于需求更高的用户,可能需要更快捷地搜索选项,这时我们可以绑定键盘事件来实现。 常见的键盘事件包括 keydown、keyup 和 keypress。其中 keydown 和 keyup 事件可以检测用户按下和松开键盘上的任何键,而 keypress 事件只能检测 ASCII 字符按下的情况。 我们可以在 el-select 的源码中找到下拉列表的 HTML 元素,然后通过 addEventListener 方法来绑定键盘事件。比如,我们可以实现在输入框中按下“Enter”键来触发搜索功能: ```js let selectInput = document.querySelector('.el-select__input'); selectInput.addEventListener('keydown', function (event) { if (event.keyCode === 13) { // 13 代表回车键 this.blur(); // 收起下拉列表,使搜索结果正确显示 this.focus(); // 使输入框重新获得焦点 // 执行搜索代码 } }); ``` 在键盘事件中,我们可以使用 event.keyCode 来获取用户按下的键,然后配合相应的处理代码来完成我们想要的功能。通过这种方法,我们可以为 el-select 组件增加更多的交互体验,提高用户的使用效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值