div 设置 contenteditable 后面没有光标了

当将div设置为contenteditable后，div元素就可以被用户编辑。div元素允许用户输入文本、插入图像等操作。在设置了contenteditable属性后，可能会出现光标无法显示的问题。

出现这个问题的原因可能有以下几点：

1. 样式问题：可能是由于div的样式规则中设置了隐藏光标的样式属性，例如设置光标颜色为透明、光标宽度为0等。

2. 其他元素或脚本的干扰：在div元素的周围可能存在其他元素或JavaScript脚本，它们可能影响到光标的显示。可以通过检查周围元素的样式和脚本，确认是否有其它因素导致光标无法显示。

要解决这个问题，可以尝试以下几种方法：

1. 检查样式：确认div元素的样式是否设置了隐藏光标的属性，例如将光标颜色和宽度设置为合适的数值。

2. 检查周围元素：检查div元素周围的其他元素或脚本是否有干扰光标的行为。如果有，可以尝试将它们暂时移除，检查光标是否可以正常显示。

3. 使用JavaScript：如果以上方法均无效，可以尝试使用JavaScript来设置光标的位置和样式。可以使用document.getSelection()和document.createRange()等方法获取光标对象，并设置其样式。

通过以上方法，应该能够解决div设置contenteditable后没有光标显示的问题。

相关问题

[代码片段] 如何在contenteditable的div中设置和获取光标位置？

要在`contenteditable`的`div`中设置和获取光标位置，可以使用`Selection`对象和`Range`对象。下面是一个示例代码片段：

function getCaretPosition(element) {
  let caretOffset = 0;
  const range = window.getSelection().getRangeAt(0);
  const preCaretRange = range.cloneRange();
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.endContainer, range.endOffset);
  caretOffset = preCaretRange.toString().length;
  return caretOffset;
}

function setCaretPosition(element, caretPos) {
  const range = document.createRange();
  const sel = window.getSelection();
  let currentNode = element;
  let charCount = 0;
  while (currentNode && charCount < caretPos) {
    if (currentNode.nodeType === Node.TEXT_NODE) {
      charCount += currentNode.length;
    } else {
      const { childNodes } = currentNode;
      for (let i = 0; i < childNodes.length; i += 1) {
        range.selectNodeContents(childNodes[i]);
        charCount += range.toString().length;
      }
    }
    if (charCount > caretPos) {
      range.setStart(currentNode, currentNode.length + caretPos - charCount);
      sel.removeAllRanges();
      sel.addRange(range);
      break;
    }
    currentNode = currentNode.nextSibling;
  }
}

其中，`getCaretPosition`函数可以获取当前光标在`element`中的位置，`setCaretPosition`函数可以将光标设置到`element`的指定位置。你可以在需要的时候调用这两个函数来设置和获取光标位置。

div的contenteditable受控

div的contenteditable属性可以通过控制光标的位置来实现受控。以下是一个示例代码，演示如何通过Vue.js实现div的contenteditable属性受控：

<template>
  <div class="editor" contenteditable="true" @input="onInput" ref="editor">{{ content }}</div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    onInput() {
      this.content = this.$refs.editor.innerHTML
    }
  }
}
</script>

在上面的代码中，我们使用Vue.js来实现div的contenteditable属性受控。我们将div的内容绑定到Vue实例的data属性中的content变量上，并在输入时更新content变量的值。这样，我们就可以通过Vue.js来控制div的contenteditable属性。