uni-app textarea @input 事件在 ios 下执行异常

uni-app textarea @input 事件在 ios 下执行异常

开发环境 版本号 项目创建方式
Windows win11 HBuilderX 
产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：3.4.7

第三方开发者工具版本号：1.05.2201240

基础库版本号：2.24.2

项目创建方式：HBuilderX

### 示例代码：

```html
<template>  
    <view class="content" style="padding-bottom: 50px;box-sizing: border-box;position: relative;height: 100vh;" >  
        <template v-for="(message, index) in messages" :key="index">  
            <view class="message anchor mary" :id="''+message.id" style="width: 100%;">  
                <view>  
                    <view class="nickname">  
                        {{message.sender_nickname}}  
                    </view>  
                    <template v-if="message.type == 'text'">  
                        <view class="content" :id="''+index" [@longpress](/user/longpress)="msgAction(message)">  
                            <template><rich-text class="content-text" :nodes="message.content"></rich-text></template>  
                        </view>  
                    </template>  
                </view>  
            </view>  
        </template>  
        <textarea style="height: 50px;border: 1px solid #8f8f94;position: absolute;bottom: 0;width: 100%;" :value="content" class="textarea__inner"  
            :show-confirm-bar="false"  
            confirm-hold disable-default-padding  
            placeholder="placeholder"  
            [@input](/user/input)="content = $event.detail.value"  
        ></textarea>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                messages: [{  
                    content: "1",  
                    id: 1,  
                    sender_nickname: "佚名",  
                    type: "text",  
                }],  
                content: ''  
            }  
        },  
        onLoad() {  

        },  
        onShow() {  
            uni.request({  
                url: 'https://xxxx.xx/test',  
                success: (res) => {  
                },  
                fail: () => {  
                    this.messages.push({  
                        content: "2",  
                        id: 2,  
                        sender_nickname: "佚名",  
                        type: "text",  
                    })  
                }  
            });  
        },  
        methods: {  
            msgAction(message){  
                uni.showToast({  
                    title: 'content: '+message.content  
                })  
            }  
        }  
    }  
</script>  

<style>  
</style>

操作步骤：

<textarea :value="content" [@input](/user/input)="content = $event.detail.value"></textarea>  
textarea 输入 input 不执行

预期结果：

textarea 输入 执行 [@input](/user/input)方法

实际结果：

textarea 输入 执行 [@longpress](/user/longpress)="msgAction(message)"

bug描述：

写一个im聊天时出现的bug ( 仅在ios下出现 , ios版本15.4.1 )

textarea 输入时 [@input](/user/input) 方法不执行, 会执行 [@longpress](/user/longpress)="msgAction(message)"

过程: v-for 渲染 messages 消息组, uni.request异步获取历史消息, textarea 输入不执行 [@input](/user/input), 会执行 [@longpress](/user/longpress)


更多关于uni-app textarea @input 事件在 ios 下执行异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

描述起来有点有点绕口
<textarea :value=“content” @input=“content = $event.detail.value”></textarea>
临时解决的方法是 , 如果 $event.type为 input , 则将 $event.detail.value 赋值给 content
@longpress="$event.type == ‘input’ ? content = $event.detail.value : msgAction(message)"

更多关于uni-app textarea @input 事件在 ios 下执行异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 textarea 组件时，如果在 iOS 设备上遇到 [@input](/user/input) 事件执行异常的问题，可能是由于 iOS 系统的某些特性或 uni-app 的兼容性问题导致的。以下是一些可能的解决方案和调试建议：

1. 使用 [@input](/user/input).native 事件

有时，[@input](/user/input) 事件在 iOS 上可能无法正常触发。可以尝试使用 [@input](/user/input).native 事件来捕获原生输入事件。

<textarea [@input](/user/input).native="handleInput"></textarea>

2. 使用 @blur 或 @change 事件

如果 [@input](/user/input) 事件在 iOS 上无法正常工作，可以尝试使用 @blur 或 @change 事件来捕获输入内容。

<textarea @blur="handleBlur"></textarea>
<textarea @change="handleChange"></textarea>

3. 使用 v-model 双向绑定

如果只是需要获取 textarea 的内容，可以使用 v-model 进行双向绑定，而不依赖于 [@input](/user/input) 事件。

<textarea v-model="inputValue"></textarea>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

4. 检查 iOS 系统版本

某些 iOS 系统版本可能存在兼容性问题，确保你的 iOS 设备和系统版本是最新的，或者检查是否有已知的兼容性问题。

5. 使用 uni-app 官方插件或组件

如果问题依然存在，可以尝试使用 uni-app 官方提供的一些插件或组件，或者查看官方文档是否有相关的解决方案。

6. 调试和日志

在开发过程中，可以通过添加日志来调试 [@input](/user/input) 事件的触发情况，看看是否在 iOS 上触发了事件，以及事件处理函数是否正常执行。

<textarea [@input](/user/input)="handleInput"></textarea>

<script>
export default {
  methods: {
    handleInput(event) {
      console.log('Input event triggered:', event);
      // 处理输入内容
    }
  }
};
</script>
回到顶部