【小程序开发技巧】input框保持focus状态

本文介绍了一种解决小程序中输入框点击发送后键盘异常收回的问题。通过调整按钮与输入框的位置关系,利用事件冒泡原理,成功避免了键盘闪烁的情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在做一个小程序,用到了即时通讯框架,于是着手撸一个界面
在这里插入图片描述
(请别介意这爆丑的界面=3=)
开发者工具上,调试,即时通讯系统能够正常使用了,嗯,上真机~
这时候就出现问题了。
因为点击input框时,会聚焦拉起键盘,但是点击发送时,input丢失了焦点,键盘就缩回去了,难不成要用户发一句点一下键盘??
查看官方api文档,对于input组件,有一个可能用的上的属性focus

属性名类型默认值说明
focusBooleanfalse获取焦点

假如我点击了按钮,然后再给input框的focus属性赋值true的话,不就可以了?
啪啦啪啦写完实现,真机调试!
什么鬼,这键盘蹦跶的,是要瞎了用户眼吗?
没法了,只好网上找解决方案。

前面废话说完了,重头戏来了~

网上找到的基本上都是跟我的解决方案一样????

冥思苦想,然后想到了一个奇葩的解决方法,各位如果有啥建议就说说哈~

将< button>放到< input >里去

就是这样

<input type="text" bindinput="chat">
    <button bindtap="send">发送</button>
</input>

原理上大概就是,
bindtap事件是冒泡的,点击了发送后,从而使得focus未发生改变,也就不会闪烁了。

对于input组件的focus属性,可以通过设置它为true来获取焦点。在Vue中,可以通过在模板中给input组件指定ref的值,然后使用this.$refs来获取组件,进而设置焦点。例如,可以使用以下代码来设置焦点: ```javascript <input ref="user_name" /> ``` 然后在js中,使用如下代码获取并设置焦点: ```javascript let input = this.$refs.user_name; input.focus(); ``` 如果上述方法无效,可以尝试将获取到的组件元素用索引访问,例如: ```javascript let input = this.$refs["user_name"][0]; input.focus(); ``` 或者更简洁地写为: ```javascript this.$refs["user_name"][0].focus(); ``` 这样,就可以通过设置focus属性来使input获取焦点了。希望这些方法能够帮助到您解决问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【小程序开发技巧input保持focus状态](https://blog.youkuaiyun.com/Athain/article/details/88959703)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue设置输入input的焦点focus](https://blog.youkuaiyun.com/superatom01/article/details/130651013)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值