uni-app Textarea如何清空输入法未确认的内容

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app Textarea如何清空输入法未确认的内容
请问如何点发送的时候清空键盘未确认的内容

图片

Harmonyos Next教程
12 回复

这种都是默认行为吧，选择一个提示的文本后再删除


您好，我看微信是可以直接发送的，发送完成把未确认的也清空了，想实现那样的效果

有解决了吗？ 我也遇到这个问题 app端手写输入的时候 如果不选择预选的值 就发送 这样是清空不掉输入框的值的

参考我的回复

请问有解决了吗

参考我的回复

我测试了一下 uni-im 是可以清空的，下载地址：https://im.dcloud.net.cn/uni-portal.html
是不是你没有在 webview 的下一次事件循环执行引起的，包一层 setTimeout(()=>{},0) 试试看

你好，我试了一下uni-im，uni-im上点击发送消息了之后，目前的现象是会出现先隐藏键盘，然后再显示键盘的现象，处理逻辑应该是通过隐藏键盘来取消待确认这部分的内容，从而达到清空的效果，虽然这种做法能达到清空的效果，但是体验上不是很好，另外还有一个潜在的问题，就是输入英文的时候，某些输入法会有智能提示，所以整个单词会处于待确认的状态，这个时候只会触发第一个字符的内容修改，后面的不会触发input的事件，例如 我输入了define，删除了e，此时会 触发input，再删除n，此时不会触发input事件，直到把最前面的d删除了，才会触发

回复 8***@qq.com: 和键盘失去焦点无关，失焦是因为点了非输入框元素引起的。可以把发送按钮做成可聚焦的元素，发送完毕后切回避免。 后面你说的触发 input 请结合具体需求说明

回复 DCloud_uniCloud_JSON: 原本是有把发送按钮做成可聚焦元素的，但是这样在有些输入法的智能提示（此帖子截图）会导致发送了之后，清空了，但是实际看看到的输入框上还有内容，此时输入框的v-model绑定的变量实际是空的了，但是输入法上还会显示原先发送的内容，uni-im没有这个问题，是因为uni-im做了隐藏键盘从而让输入法清除了这部分内容，所以uni-im没有发送了消息之后内容还在的问题，但是发送后键盘会先下后上，这样的体验不是很好，可以体验下uni-im看看应该就直到了哈

回复 8***@qq.com: 有按我说的给你的清空内容的代码 包一层 setTimeout(()=>{},0) 试过没

在uni-app中，如果你希望在用户未确认输入（即未点击“完成”或“确认”按钮）的情况下清空 textarea 的内容，可以通过监听相关事件并结合一些逻辑来实现。以下是一个示例代码，展示了如何在 textarea 失去焦点时清空未确认的内容。

首先，确保你的页面中有一个 textarea 组件：

<template>
  <view>
    <textarea
      id="myTextarea"
      v-model="textareaContent"
      @blur="handleTextareaBlur"
      placeholder="请输入内容"
    />
    <button @click="clearTextarea">清空内容</button>
  </view>
</template>

在脚本部分，你可以定义相关的数据和方法：

<script>
export default {
  data() {
    return {
      textareaContent: ''
    };
  },
  methods: {
    handleTextareaBlur(event) {
      // 你可以在这里添加一些条件，比如判断用户输入的内容是否为空或者是否符合特定条件
      // 如果条件满足，则清空内容
      // 这里我们假设只要失去焦点且内容非空，就清空内容
      if (this.textareaContent.trim() !== '') {
        uni.showModal({
          title: '提示',
          content: '您未确认输入的内容将被清空，确定继续吗？',
          success: (res) => {
            if (res.confirm) {
              this.textareaContent = '';
            }
          }
        });
      }
    },
    clearTextarea() {
      // 这个方法用于手动清空textarea内容，可以通过按钮触发
      this.textareaContent = '';
    }
  }
};
</script>

在这个示例中，我们使用了 @blur 事件监听器来检测 textarea 何时失去焦点。当 textarea 失去焦点时，handleTextareaBlur 方法会被调用。该方法首先检查 textarea 的内容是否非空，如果非空，则显示一个模态对话框询问用户是否确定要清空内容。如果用户确认，则清空 textarea 的内容。

此外，我们还提供了一个手动清空 textarea 内容的按钮，绑定到 clearTextarea 方法上，这个方法会直接清空 textarea 的内容，不受任何条件限制。

这种方法可以确保在用户未明确确认输入内容的情况下，通过一些交互提示用户是否要清空未保存的内容，从而提高用户体验。

回到顶部