uni-app textarea组件在IOS存在问题

开发环境	版本号	项目创建方式
Windows	win11	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win11

HBuilderX类型：正式

HBuilderX版本号：3.4.6

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：iphone x

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

```html
<textarea v-model="msg" :show-confirm-bar="false" :cursor-spacing="10" class="itl-area n-flex-1"  
        placeholder="总要说点什么吧" :style="'height:'+areaHeight+'px;'" :maxlength="1000" :adjust-position="true"  
        confirm-type="send" @linechange="toChangeLine" @confirm="toConfirm"></textarea>

js部分

watch: {  
    msg(txt) {  
        if (txt.indexOf('\n') != -1) { //敲了回车键了  
            console.log("按了回车键盘")  
            const stripHTMLTags = txt.replace(/]*&gt;/g, '');  
            this.$emit("confirm", stripHTMLTags.trim())  

            uni.hideKeyboard() //收起软键盘    
            this.$nextTick(() => {  
                this.msg = ''  
            })  
        }  
    }  
},

操作步骤： (IOS) textarea 组件 confirm-type设置为send 点击发送

预期结果：点击发送 , 和上个版本一样向数据拼接 \n 或者有个回调事件

实际结果：点击发送收起软键盘后无任何回调和变化

bug描述：

textarea 组件 confirm-type设置为send 点击键盘上的发送没换行(IOS,IOS,IOS!!!)

bupafengyu 1楼•17 天前

什么意思？按了发送后，没有触发 msg watcher？还是什么其他情况，提供一个示例并详细描述一下你的问题

wuwangju 2楼•17 天前作者

按了发送没有触发msg watcher, 并且软键盘收起了

eggper 3楼•17 天前

最新版本的已修复,可以了

eggper 4楼•17 天前

在 uni-app 中使用 textarea 组件时，可能会在 iOS 设备上遇到一些问题。以下是一些常见的问题及其可能的解决方案：

1. 输入框高度问题

问题描述：在 iOS 设备上，textarea 的高度可能会自动调整，导致布局错乱。
解决方案：可以通过设置 textarea 的 auto-height 属性为 false 来禁用自动高度调整。
```
<textarea auto-height="false"></textarea>
```

2. 输入框聚焦问题

问题描述：在 iOS 设备上，textarea 聚焦时可能会出现键盘遮挡输入框的情况。

解决方案：可以通过监听 focus 事件，手动调整页面滚动位置，确保输入框在键盘上方可见。

<textarea @focus="handleFocus"></textarea>

methods: {
  handleFocus() {
    uni.pageScrollTo({
      scrollTop: 100, // 根据实际情况调整
      duration: 300
    });
  }
}

3. 输入框内容显示问题

问题描述：在 iOS 设备上，textarea 的内容可能会显示不全或出现滚动问题。
解决方案：可以尝试设置 textarea 的 height 属性，确保内容能够完整显示。
```
<textarea style="height: 200px;"></textarea>
```

4. 输入框光标问题

问题描述：在 iOS 设备上，textarea 的光标可能会显示异常或无法正确定位。
解决方案：可以尝试通过设置 cursor-spacing 属性来调整光标与键盘之间的距离。
```
<textarea cursor-spacing="20"></textarea>
```

5. 输入框输入延迟问题

问题描述：在 iOS 设备上，textarea 的输入可能会出现延迟或卡顿。
解决方案：可以尝试减少 textarea 的 maxlength 属性值，或者优化页面中的其他性能瓶颈。

6. 输入框样式问题

问题描述：在 iOS 设备上，textarea 的默认样式可能与预期不符。
解决方案：可以通过自定义 CSS 样式来覆盖默认样式，确保在不同设备上显示一致。
```
textarea {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}
```

7. 输入框 placeholder 问题

问题描述：在 iOS 设备上，textarea 的 placeholder 可能会显示异常或位置不对。
解决方案：可以尝试通过自定义样式来调整 placeholder 的显示效果。
```
textarea::placeholder {
  color: #999;
  font-size: 14px;
}
```

8. 输入框键盘类型问题

问题描述：在 iOS 设备上，textarea 的键盘类型可能不符合预期。
解决方案：可以通过设置 input-type 属性来指定键盘类型。
```
<textarea input-type="text"></textarea>
```

9. 输入框滚动问题

问题描述：在 iOS 设备上，textarea 的内容滚动可能会不流畅或出现卡顿。
解决方案：可以尝试通过设置 scroll-top 属性来手动控制滚动位置。
```
<textarea scroll-top="100"></textarea>
```

10. 输入框事件问题

问题描述：在 iOS 设备上，textarea 的事件（如 input、blur 等）可能无法正常触发。

解决方案：可以尝试使用 @input、@blur 等事件监听器，确保事件能够正常触发。

<textarea @input="handleInput" @blur="handleBlur"></textarea>

methods: {
  handleInput(event) {
    console.log(event.detail.value);
  },
  handleBlur(event) {
    console.log('Blur');
  }
}