uni-app 3.3.5版本选中内容后光标移出编辑器重新聚焦不是定位光标而是继续选中

uni-app 3.3.5版本选中内容后光标移出编辑器重新聚焦不是定位光标而是继续选中

开发环境 版本号 项目创建方式
HbuilderX 3.3.5

操作步骤：

hbuilderxbug


### 预期结果：

应该是聚焦光标，而不是从选中文本开始，选中一段文本。

实际结果：

选中了一段文本。


### bug描述：

在hbuilderX中使用查询功能查询一段文本，之后光标移出再重新聚焦，会选中一段代码，而不是聚焦光标。

并且建议新增功能：shift+单击收起按钮，可以展开 / 收起所有子类的代码， 类似于vscode功能， 项目代码多了以后，页面太长了，看着心累，一个个收起来太慢了。

更多关于uni-app 3.3.5版本选中内容后光标移出编辑器重新聚焦不是定位光标而是继续选中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

没遇到你的问题啊,你是怎么个操作步骤,能否详细说下

更多关于uni-app 3.3.5版本选中内容后光标移出编辑器重新聚焦不是定位光标而是继续选中的实战教程也可以访问 https://www.itying.com/category-93-b0.html


ctrl + f 查询一个存在的字符串。 然后鼠标移出去，再点击编辑器的内容区， 应该是聚焦的，但是结果是选中了一段文本，我的双屏，单屏复现的话，可以缩小编辑器。

没有复现 要不你给个视频吧

在 uni-app 3.3.5 版本中，如果你在使用编辑器组件时遇到选中内容后光标移出编辑器重新聚焦时，光标没有定位到正确位置而是继续选中内容的问题，这可能是由于编辑器组件的内部实现或浏览器的默认行为导致的。

以下是一些可能的解决方案和调试步骤：

1. 检查编辑器组件的实现

确保你使用的编辑器组件（如 textarea 或 input）是正确实现的。某些自定义编辑器组件可能会在处理焦点和选中状态时出现问题。

2. 手动处理焦点事件

你可以尝试在编辑器失去焦点时手动清除选中状态，并在重新聚焦时设置光标位置。

<template>
  <textarea
    ref="editor"
    v-model="content"
    @blur="handleBlur"
    @focus="handleFocus"
  ></textarea>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    };
  },
  methods: {
    handleBlur() {
      // 清除选中状态
      this.$refs.editor.selectionStart = this.$refs.editor.selectionEnd;
    },
    handleFocus() {
      // 设置光标位置
      this.$refs.editor.selectionStart = this.$refs.editor.selectionEnd = this.content.length;
    }
  }
};
</script>

3. 使用 selectionStart 和 selectionEnd

你可以通过 selectionStart 和 selectionEnd 属性来手动控制光标的位置和选中状态。

<template>
  <textarea
    ref="editor"
    v-model="content"
    @blur="handleBlur"
    @focus="handleFocus"
  ></textarea>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    };
  },
  methods: {
    handleBlur() {
      // 清除选中状态
      this.$refs.editor.selectionStart = this.$refs.editor.selectionEnd;
    },
    handleFocus() {
      // 设置光标位置
      this.$refs.editor.selectionStart = this.$refs.editor.selectionEnd = this.content.length;
    }
  }
};
</script>

4. 使用 setSelectionRange 方法

你可以使用 setSelectionRange 方法来精确控制光标的位置和选中状态。

<template>
  <textarea
    ref="editor"
    v-model="content"
    @blur="handleBlur"
    @focus="handleFocus"
  ></textarea>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    };
  },
  methods: {
    handleBlur() {
      // 清除选中状态
      this.$refs.editor.setSelectionRange(this.$refs.editor.selectionStart, this.$refs.editor.selectionStart);
    },
    handleFocus() {
      // 设置光标位置
      this.$refs.editor.setSelectionRange(this.content.length, this.content.length);
    }
  }
};
</script>
回到顶部