uni-app nvue 下 textarea 输入英文时，每次输入一个字母都会自动跳空格

uni-app nvue 下 textarea 输入英文时，每次输入一个字母都会自动跳空格

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
版本号 I7-9750H
HBuilderX类型 正式
HBuilderX版本号 3.2.6
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 mate 30 pro 5g
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>    
    <view class="content">    

        <view class="logo bg">    
            <textarea v-model="text" placeholder=""/>&lt;/view&gt;    
    </view&gt;    
</template&gt;    

<script&gt;    
    export default {    
        data() {    
            return {    
                text: 'Hello'    
            }    
        },    
        onLoad() {    

        },    
        onShow() {    

        },    
        methods: {    

        }    
    }    
</script&gt;

操作步骤：

在nvue 页面 所有textarea 通过 v-model 绑定值得时候，就会出现这个问题

预期结果：

可以连续输入英文

实际结果：

不可以连续输入英文。

bug描述：

nvue 页面中，使用 textarea 组件通过v-model 绑定 ， 在手机上通过法输入英文的时候 ，只能一个一个字的输入 ，不能触发联想 ；而且有空格

测试视频，已经上传到附件。

附件：

WeChat_20210916183412.zip


更多关于uni-app nvue 下 textarea 输入英文时，每次输入一个字母都会自动跳空格的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

textarea 在 nvue 下有很多问题，我这边遇到很多和输入法有关的问题，尤其是全键盘。 最后排查确认，将 v-model 替换成 value 和 @input 这种大部分输入问题就解决了

更多关于uni-app nvue 下 textarea 输入英文时，每次输入一个字母都会自动跳空格的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大佬好，我现在用value 和@input 输入，因为涉及到实时替换字符，所以现在的情况，输入英文时候还是会，输入一个字母，跳一个空格的情况。

回复 我不是大v: 别用实时替换在app端，打字不顺畅，js和app要来回通信的，可以考虑用lodash 的节流操作，或者描述下你的业务场景看怎么优化

回复 青阳_1900: 是的，确实不流畅，跟产品讨论，已经去掉这个操作了。不过还是希望官方修复一下最好， 谢谢你的指导~

是不是我反馈的问题太白痴了？没人回一下的？ o(╥﹏╥)o

这个问题是 nvue 中 textarea 组件在 Android 平台上的一个已知问题，主要与 nvue 的渲染机制和 v-model 的双向绑定有关。

原因分析：

  1. nvue 使用原生渲染，textarea 对应的是 Android 原生 EditText 组件
  2. v-model 在每次输入时都会触发数据同步和页面更新
  3. 在 Android 原生环境下，这种频繁的数据更新可能会干扰输入法的联想功能
  4. 空格问题通常是因为输入法在每次字符输入后触发了重新渲染

解决方案：

  1. 使用 @input 事件替代 v-model：
<textarea :value="text" [@input](/user/input)="onInput" placeholder=""/>

methods: {
    onInput(e) {
        this.text = e.value;
    }
}
  1. 添加防抖处理（推荐）：
methods: {
    onInput: _.debounce(function(e) {
        this.text = e.value;
    }, 50)
}
  1. 使用 :value 和手动更新：
data() {
    return {
        text: 'Hello',
        inputValue: 'Hello'
    }
},
methods: {
    handleInput(e) {
        this.inputValue = e.value;
        // 延迟更新绑定的数据
        setTimeout(() => {
            this.text = this.inputValue;
        }, 0);
    }
}
回到顶部