uni-app editor组件有序无序列表在ios端焦点位置异常,序号之前出现焦点

uni-app editor组件有序无序列表在ios端焦点位置异常,序号之前出现焦点

操作步骤:

  • 使用editor组件,选择无序或有序列表

预期结果:

  • 光标在序号之后

实际结果:

  • 光标在序号之前

bug描述:

在ios端不管模拟器还是真机打包后,有序无序列表的光标都会在序号之前

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win10
HBuilderX类型 正式
HBuilderX版本 4.24
手机系统 iOS
手机系统版本 iOS 15
手机厂商 苹果
手机机型 ios
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app editor组件有序无序列表在ios端焦点位置异常,序号之前出现焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app editor组件有序无序列表在ios端焦点位置异常,序号之前出现焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中处理editor组件在iOS端焦点位置异常的问题,尤其是针对有序和无序列表,确实需要一些特定的处理。由于直接修改组件的内部行为可能受限,我们可以通过监听和处理焦点事件,结合一些DOM操作技巧来间接解决这一问题。

以下是一个示例代码,展示了如何通过监听editor组件的focusinput事件,尝试调整焦点位置,以避免序号前出现焦点的问题。请注意,这只是一个示例,具体实现可能需要根据实际情况调整。

<template>
  <view>
    <editor
      id="myEditor"
      v-model="content"
      @focus="onEditorFocus"
      @input="onEditorInput"
      placeholder="请输入内容..."
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      lastCursorPosition: 0,
    };
  },
  methods: {
    onEditorFocus(e) {
      // 可以在这里记录初始焦点位置,以便后续比较
      this.$nextTick(() => {
        const editor = uni.createSelectorQuery().select('#myEditor');
        editor.context((res) => {
          // 获取当前的光标位置,但iOS上可能不准确
          const context = res.context;
          // 这里可以根据需要记录或调整焦点位置
        });
      });
    },
    onEditorInput(e) {
      this.$nextTick(() => {
        // 尝试获取当前光标位置,并调整以避免序号前出现焦点
        const editorCtx = uni.createEditorContext('myEditor');
        editorCtx.getSelectionRange({
          success: (rangeRes) => {
            const { start, end } = rangeRes;
            if (start !== this.lastCursorPosition) {
              // 光标位置变化,检查并调整(这里假设简单的逻辑:如果位置在序号附近,则移动光标)
              if (start < 10 && this.content.charAt(start) === '1') { // 简化示例,仅检查第一个序号'1'
                const newPosition = start + 2; // 假设序号占2个字符宽度,移动到序号后
                editorCtx.setSelectionRange(newPosition, newPosition);
              }
              this.lastCursorPosition = start;
            }
          },
          fail: (err) => {
            console.error('获取光标位置失败:', err);
          },
        });
      });
    },
  },
};
</script>

上述代码通过监听editorfocusinput事件,尝试在光标位置变化时进行调整。特别地,在input事件处理中,通过getSelectionRange获取当前光标位置,并根据内容判断是否需要调整光标位置,以避免出现在序号前。

请注意,由于uni-app的跨平台特性和不同平台的渲染差异,上述方法可能需要在具体项目中根据iOS的实际表现进行进一步的调试和优化。

回到顶部