小程序
小游戏
企业微信
微信支付
扫描小程序码分享
做一个类似于微信聊天的功能,如何让点击发送按钮时,input不失去焦点,软键盘不收起,点击其他区域时键盘正常收起,在社区看了很久没有找到确切的实现方案,希望有解决这个问题的大佬提点一下
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
我写个demo帮你研究下(实测管用):
<input class="textinput" focus="{{setFocus}}" placeholder="我是输入框" type="text"> <view class="textbutton"bindtap="setFocus">发送</view> </input>
在input内部写这个发送按钮,JS里绑一个bool值setFocus在data里,同时也绑在input的focus上。然后发送的bindtap里面加入一个setData改变这个布尔值。
setFocus(){ this.setData({ setFocus:true }) },
这样你点击发送,键盘也不会收起来,然后发送的业务逻辑你自己写就行啦
wxml里面仍然是像上面那样写,input里面包裹按钮。然后wxss按下面这样写:
input的position是relative,overflow设置为inherit,button的position是absolute,然后input长度设短一点,button定位right写成负数,就可以让按钮飞出去了
.textbutton{ background: #3CB371; color: white; width: 150rpx; height: 70rpx; display: flex; align-items: center; justify-content: center; position: absolute; right: -200rpx; } .textinput{ background: black; color: white; padding: 20rpx; height: 80rpx; display: flex; position: relative; width: 500rpx; overflow: inherit; }
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
confirm-hold="true"
设置这个属性就可以了
牛批啊大佬,我想到了按钮在外面使用 focus 聚焦,键盘会先下去再上来,都快绝望了。大佬方便问下原理么,为什么按钮放里面可以 放外面不行
我的方案是这样的,使用两个 textarea,用 hidden(不能用 wx:if)控制它们交替显示,两个都要写上 hold_keyboard 属性,这样可以保证在发送之后键盘依然保持住,然后在其他区域添加 bind:tap 监听事件,在里面将 hidden 取反来强迫收回键盘。
有几点要注意
1、为什么不用 wx.hidekeyboard() 函数?因为它无法收回 bold_keyboard 为 true 的键盘
2、为什么不能用 wx:if 和 wx:else ?出于未知原因,交替显示后,键盘无法再次升起,而且输入框也处于不可用的状态,希望有人可以解释是怎么回事
3、两个 textarea 由于是隐藏,所以 content 会保留输入的内容,这时候需要通过监听函数处理一下,保证内容的一致性
4、当然,这并不是一个完美的方法,对于这个需求,只有两种思路,第一是 hold_keyboard,让键盘不动,点击其他地方之后收回。第二是想办法在发送按钮时能保持住键盘不收回(这里是有很多方案的,但是每种都有美中不足的地方)
最后还是希望官方能尽快的修复 wx.hidekeyboard() 在 bold_keyboard 为 true 的时候依然能够收回键盘
当然,最好是能做成一个属性,直接提供给开发者 = =!
谢谢
支付宝好像textarea标签里不允许插入其他标签,都给清空了,支付宝怎么兼容呀
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
我写个demo帮你研究下(实测管用):
<input class="textinput" focus="{{setFocus}}" placeholder="我是输入框" type="text"> <view class="textbutton"bindtap="setFocus">发送</view> </input>
在input内部写这个发送按钮,JS里绑一个bool值setFocus在data里,同时也绑在input的focus上。然后发送的bindtap里面加入一个setData改变这个布尔值。
setFocus(){ this.setData({ setFocus:true }) },
这样你点击发送,键盘也不会收起来,然后发送的业务逻辑你自己写就行啦
wxml里面仍然是像上面那样写,input里面包裹按钮。然后wxss按下面这样写:
input的position是relative,overflow设置为inherit,button的position是absolute,然后input长度设短一点,button定位right写成负数,就可以让按钮飞出去了
.textbutton{ background: #3CB371; color: white; width: 150rpx; height: 70rpx; display: flex; align-items: center; justify-content: center; position: absolute; right: -200rpx; } .textinput{ background: black; color: white; padding: 20rpx; height: 80rpx; display: flex; position: relative; width: 500rpx; overflow: inherit; }
confirm-hold="true"
设置这个属性就可以了
牛批啊大佬,我想到了按钮在外面使用 focus 聚焦,键盘会先下去再上来,都快绝望了。大佬方便问下原理么,为什么按钮放里面可以 放外面不行
我的方案是这样的,使用两个 textarea,用 hidden(不能用 wx:if)控制它们交替显示,两个都要写上 hold_keyboard 属性,这样可以保证在发送之后键盘依然保持住,然后在其他区域添加 bind:tap 监听事件,在里面将 hidden 取反来强迫收回键盘。
有几点要注意
1、为什么不用 wx.hidekeyboard() 函数?因为它无法收回 bold_keyboard 为 true 的键盘
2、为什么不能用 wx:if 和 wx:else ?出于未知原因,交替显示后,键盘无法再次升起,而且输入框也处于不可用的状态,希望有人可以解释是怎么回事
3、两个 textarea 由于是隐藏,所以 content 会保留输入的内容,这时候需要通过监听函数处理一下,保证内容的一致性
4、当然,这并不是一个完美的方法,对于这个需求,只有两种思路,第一是 hold_keyboard,让键盘不动,点击其他地方之后收回。第二是想办法在发送按钮时能保持住键盘不收回(这里是有很多方案的,但是每种都有美中不足的地方)
最后还是希望官方能尽快的修复 wx.hidekeyboard() 在 bold_keyboard 为 true 的时候依然能够收回键盘
当然,最好是能做成一个属性,直接提供给开发者 = =!
谢谢
支付宝好像textarea标签里不允许插入其他标签,都给清空了,支付宝怎么兼容呀