uni-app textarea设置 inputmode='none' :focus="true" 首次打开仍会弹出键盘

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

uni-app textarea设置 inputmode=‘none’ :focus=“true” 首次打开仍会弹出键盘

示例代码：

<textarea style="background-color: #aaff00;" inputmode='none' :focus="true"></textarea>

操作步骤：

直接运行就能复现

预期结果：

:focus="true"的时候不弹出键盘

实际结果：

:focus="true"的时候会弹出键盘

bug描述：

textarea设置 inputmode=‘none’ :focus="true"首次打开还是会弹出键盘
手机的webview版本是83

Image 1 Image 2

信息 描述
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本号 win10
HBuilderX类型 Alpha
HBuilderX版本 3.99
手机系统 Android
手机系统版本号 Android 11
手机厂商 小米
手机机型 小米9
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

Harmonyos Next教程
20 回复

来个人回复下啊


来个人回复下

这样试试 <template>
<textarea ref="myTextarea" input-mode="none"></textarea>
</template>

<script> export default { mounted() { this.$refs.myTextarea.blur(); }, }; </script>

不行啊

来个人回复下

:focus=“true” 这样设置就是 默认调起 键盘 (●’◡’●)，不想进入页面出现键盘直接设置为 false ，也可以 :focus=“变量” 来控制

文档里面auto-focus是获取焦点拉起键盘

还没有解决

还没有解决

还没有解决

还没有解决

没有人吗

顶顶顶顶顶顶顶他一起

顶顶顶顶顶顶顶

focus：true不是默认聚焦吗，肯定会弹出键盘啊

使用inputMode=‘none’ 禁止弹出键盘了，但是只要聚焦还是会出来

到现在了 还没解决！！！

还没解决？？？？？？~~~

inputmode="none"并不是所有平台都支持。在App平台上，即使你设置了inputmode=“none”，键盘可能还是会弹出。 如果还没有解决的话，可以使用uni.hideKeyboard();来隐藏软键盘，你不是需要设置:focus="true"吗？可以用@focus监听一下聚焦事件，然后再聚焦回调中关闭软键盘。 focus(){
uni.hideKeyboard();
}

在uni-app中，textarea 组件默认会在获取焦点时弹出软键盘，这是为了提供良好的用户体验，方便用户直接输入内容。然而，有时候我们可能希望在某些特定场景下阻止键盘的弹出，比如在展示只读文本或者某些自定义输入场景中。

尽管HTML标准中的inputmode='none'属性旨在控制移动设备上虚拟键盘的行为，但在实际开发中，并不是所有浏览器和框架都能完美支持这一属性。对于uni-app来说，单纯设置inputmode='none'可能并不足以阻止键盘的弹出，尤其是在组件首次获取焦点时。

为了解决这个问题，我们可以结合JavaScript来控制textarea的焦点行为。以下是一个可能的解决方案，通过编程方式控制焦点的设置，并在必要时阻止键盘的弹出：

<template>
  <view>
    <textarea
      ref="myTextarea"
      @focus="handleFocus"
      v-model="text"
      :inputmode="'none'"
      style="height: 100px; width: 100%;"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  mounted() {
    // 尝试在组件挂载后立即设置焦点，但随后立即移除，以避免键盘弹出
    this.$nextTick(() => {
      this.$refs.myTextarea.focus();
      this.blurTextareaImmediately();
    });
  },
  methods: {
    handleFocus(event) {
      // 在这里可以根据需要处理焦点事件，但默认阻止键盘弹出
      this.blurTextareaImmediately();
    },
    blurTextareaImmediately() {
      // 使用setTimeout来确保focus事件处理完毕后再blur
      setTimeout(() => {
        this.$refs.myTextarea.blur();
      }, 0);
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

在这个例子中，我们通过ref引用textarea组件，并在组件挂载后立即尝试设置焦点，但紧接着通过一个setTimeout（设置为0毫秒延迟）来移除焦点。这种方法利用了JavaScript的事件循环机制，确保在焦点事件处理完毕后立即移除焦点，从而避免键盘的弹出。

请注意，这种方法可能不是所有场景下都适用，特别是如果textarea需要在某些用户交互后变为可编辑状态，那么就需要更复杂的逻辑来处理这些场景。此外，不同平台和浏览器的行为也可能有所不同，因此在实际应用中需要进行充分的测试。

回到顶部