uni-app NVUE textarea无法confirm换行

uni-app NVUE textarea无法confirm换行

项目信息 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 windows10
HBuilderX类型 正式
HBuilderX版本 3.4.6
手机系统 iOS
手机系统版本 iOS 14
手机厂商 苹果
手机机型 iphoneXsMax
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<textarea value="" placeholder="111" />

操作步骤：

  1. 任意新建一个项目
  2. 输入以下代码
    <textarea value="" placeholder="111" />

预期结果：

应当可以输入内容，confirm自动换行

实际结果：

可以输入， 但无法换行。confirm后键盘自动收起

bug描述：

NVUE textarea无法confirm换行


更多关于uni-app NVUE textarea无法confirm换行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

之前版本实现的有问题, 默认是收起键盘，如果想换行需要设置这个参数 confirmHold=“true” 详情请看文档 https://uniapp.dcloud.io/component/textarea.html

更多关于uni-app NVUE textarea无法confirm换行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


实测有效 感谢

此设备在旧版是否正常？

旧版本是可以换行的 更新 3.4.6后发现换不了行了 3.4.7问题依旧

vue正常

回复 6***@qq.com: 好的，相关人员已在排查，已加分，感谢您的反馈！

在 uni-app 中使用 nvue 开发时，textarea 组件的 confirm 事件默认不会触发换行。这是因为 nvue 的 textarea 组件是基于原生组件实现的，其行为与 Web 端的 textarea 有所不同。

如果你希望在按下确认键（如键盘上的“完成”或“回车”键）时实现换行，可以通过以下方式处理：

1. 监听 confirm 事件并手动添加换行符

你可以在 confirm 事件中手动添加换行符（\n）到 textarea 的值中。

<template>
  <view>
    <textarea
      :value="inputValue"
      @input="onInput"
      @confirm="onConfirm"
      placeholder="请输入内容"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onInput(event) {
      this.inputValue = event.detail.value;
    },
    onConfirm() {
      this.inputValue += '\n'; // 手动添加换行符
    }
  }
};
</script>

2. 使用 blur 事件代替 confirm 事件

如果你希望在用户完成输入后处理内容，可以使用 blur 事件。blur 事件在 textarea 失去焦点时触发。

<template>
  <view>
    <textarea
      :value="inputValue"
      @input="onInput"
      @blur="onBlur"
      placeholder="请输入内容"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onInput(event) {
      this.inputValue = event.detail.value;
    },
    onBlur() {
      // 在这里处理失去焦点后的逻辑
    }
  }
};
</script>

3. 使用 keyboardheightchange 事件

如果你需要监听键盘高度的变化，可以使用 keyboardheightchange 事件。这个事件在键盘高度变化时触发。

<template>
  <view>
    <textarea
      :value="inputValue"
      @input="onInput"
      @keyboardheightchange="onKeyboardHeightChange"
      placeholder="请输入内容"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onInput(event) {
      this.inputValue = event.detail.value;
    },
    onKeyboardHeightChange(event) {
      console.log('键盘高度变化:', event.detail.height);
    }
  }
};
</script>

4. 使用 focus 事件

如果你需要在 textarea 获得焦点时执行某些操作，可以使用 focus 事件。

<template>
  <view>
    <textarea
      :value="inputValue"
      @input="onInput"
      @focus="onFocus"
      placeholder="请输入内容"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onInput(event) {
      this.inputValue = event.detail.value;
    },
    onFocus() {
      console.log('textarea 获得焦点');
    }
  }
};
</script>
回到顶部