小程序
小游戏
企业微信
微信支付
扫描小程序码分享
做一个类似于微信聊天的功能，如何让点击发送按钮时，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标签里不允许插入其他标签，都给清空了，支付宝怎么兼容呀