uni-app nvue 移动端 textarea唤起软键盘 点击发送 会换行而不是正常发送

uni-app nvue 移动端 textarea唤起软键盘 点击发送 会换行而不是正常发送

测试过的手机

ios14 华为

操作步骤

nvue 移动端 textarea唤起软键盘 点击发送 会换行而不是正常发送

预期结果

nvue 移动端 textarea唤起软键盘 点击发送应该是正常发送

实际结果

发送不出去文本变成了换行

bug描述

nvue 移动端 textarea唤起软键盘 点击发送 会换行而不是正常发送


| 信息类别       | 内容           |
|----------------|----------------|
| 产品分类       | uniapp/App     |
| PC开发环境     | Windows        |
| PC开发环境版本 | win10          |
| HBuilderX类型  | 正式           |
| HBuilderX版本  | 3.1.2          |
| 手机系统       | 全部           |
| 手机厂商       | 华为           |
| 页面类型       | nvue           |
| 打包方式       | 云端           |
| 项目创建方式   | HBuilderX      |

更多关于uni-app nvue 移动端 textarea唤起软键盘 点击发送 会换行而不是正常发送的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

首先他并不是bug。苹果的默认行为就是换行，如果想把换行改成发送监听换行即可。
示例代码如下： <template>
<view class="content">
<textarea class="textarea" v-model="txt"></textarea>
</view>
</template>

<script> export default { data() { return { txt:"txt" } }, watch: { txt(txt) { if( txt.indexOf('\n') != -1 ){ //敲了回车键了 uni.hideKeyboard() //收起软键盘 } } }, methods: { } } </script> <style> .textarea{ border: solid 1px red; } </style>

更多关于uni-app nvue 移动端 textarea唤起软键盘 点击发送 会换行而不是正常发送的实战教程也可以访问 https://www.itying.com/category-93-b0.html


但是如果采用watch在textarea直接粘贴一个带\n的一段文本，也很导致触发响应的事件，请问是否有解决方案呢？

回复 冰_峰: 我这边也出现了这个问题 点击右下角的发送触发不了@confim事件 watch输入内容也经常出现问题 哎 问题真的多

好的谢谢

这是nvue中textarea组件在移动端的一个常见问题，主要原因是软键盘的"发送"按钮行为与textarea默认行为冲突。解决方案如下：

  1. 监听textarea的confirm事件（对应软键盘发送按钮）：
<textarea @confirm="handleSend"></textarea>

methods: {
  handleSend(e) {
    // 处理发送逻辑
    this.sendMessage(e.detail.value)
    // 清空输入
    this.inputValue = ''
  }
}
  1. 如果需要阻止默认换行行为，可以添加以下样式：
textarea {
  white-space: pre-line;
}
  1. 对于iOS平台，可能需要额外处理return-key-type属性：
<textarea return-key-type="send" @confirm="handleSend"></textarea>
  1. 如果问题依旧，可以尝试在handleSend方法中手动blur textarea：
handleSend(e) {
  // ...发送逻辑
  this.$refs.textarea.blur()
}
回到顶部