收藏
回答

小程序发送消息功能,点击‘发送’按钮如何让软键盘不收起?

做一个类似于微信聊天的功能,如何让点击发送按钮时,input不失去焦点,软键盘不收起,点击其他区域时键盘正常收起,在社区看了很久没有找到确切的实现方案,希望有解决这个问题的大佬提点一下

回答关注问题邀请回答
收藏

5 个回答

  • 曹孟良
    曹孟良
    2021-11-10

    我写个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;
      width150rpx;
      height70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: -200rpx;
    }
    .textinput{
      background: black;
      color: white;
      padding20rpx;
      height80rpx;
      display: flex;
      position: relative;
      width500rpx;
      overflow: inherit;
    }
    
    2021-11-10
    有用 6
    回复 11
    • 。。。
      。。。
      发表于移动端
      2021-11-10
      非常感谢
      2021-11-10
      回复
    • 。。。
      。。。
      2021-11-10
      我之前就有试在发送的bindtap事件里面去设置focus为true,但是发送的按钮在input的外面,并没有效果,因为整个功能时按照微信的逻辑设计,有按钮会切换输入框和长按发语音消息,发送按钮也是和展开扩展功能按钮切换存在的,所以感觉放在input内并不是很合适,不知道您还有别的方案吗,再次感谢
      2021-11-10
      回复
    • 。。。
      。。。
      2021-11-10回复曹孟良
      这个方案确实行得通,辛苦大佬了
      2021-11-10
      回复
    • 豆浆
      豆浆
      2022-04-14
      我想问如果不是自己写的发送按钮 而是软键盘自带的发送如何解决这个问题,现在遇到了。。。
      2022-04-14
      回复
    • 月光很温柔
      月光很温柔
      2022-04-18
      大佬,无论我用input输入框的 hold-keyboard 属性还是你这个方法,为什么点击发送后消息总是延迟个半秒显示在屏幕上
      2022-04-18
      回复
    查看更多(6)
  • o.o
    o.o
    2022-11-17

    confirm-hold="true"

    设置这个属性就可以了

    2022-11-17
    有用 1
    回复
  • 无心
    无心
    2023-08-10

    牛批啊大佬,我想到了按钮在外面使用 focus 聚焦,键盘会先下去再上来,都快绝望了。大佬方便问下原理么,为什么按钮放里面可以 放外面不行

    2023-08-10
    有用
    回复
  • 侧耳倾听
    侧耳倾听
    2022-05-09

    我的方案是这样的,使用两个 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 的时候依然能够收回键盘

    当然,最好是能做成一个属性,直接提供给开发者 = =!

    谢谢

    2022-05-09
    有用
    回复
  • 曹大静
    曹大静
    2022-05-05

    支付宝好像textarea标签里不允许插入其他标签,都给清空了,支付宝怎么兼容呀

    2022-05-05
    有用
    回复
登录 后发表内容