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

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

更多关于uni-app textarea设置 inputmode='none' :focus="true" 首次打开仍会弹出键盘的实战教程也可以访问 https://www.itying.com/category-93-b0.html

20 回复

来个人回复下啊

更多关于uni-app textarea设置 inputmode='none' :focus="true" 首次打开仍会弹出键盘的实战教程也可以访问 https://www.itying.com/category-93-b0.html


来个人回复下

这样试试 <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需要在某些用户交互后变为可编辑状态，那么就需要更复杂的逻辑来处理这些场景。此外，不同平台和浏览器的行为也可能有所不同，因此在实际应用中需要进行充分的测试。

回到顶部