Question

为什么光标位于右侧而不是左侧。

$('.legoact').focus();

.lego{
  background:#ddd;
  width:70%;
  margin:14px;
  position:relative;
}

.mark{
  position:absolute;
  right:-9px; top:-9px;
  width:14px; height:14px;
  border:2px solid white;
  border-radius:50%;
  background:red;
  cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class='lego legotxt legoact' contenteditable='true'>
  <div class='mark' id='mark' contenteditable='false'></div>
</div>

Answer 1

使用.focus()时，插入标记将放置在内容的开头。在这里，第一个内容是您的#mark div，因此光标位于它的前面。您会看到按下 Delete 键时，该键将被删除：

$('.legoact').focus();

.lego{
background:#ddd;
width:70%;
margin:14px;
position:relative;
}

.mark{
	position:absolute;
	right:-9px; top:-9px;
	width:14px; height:14px;
	border:2px solid white;
	border-radius:50%;
	background:red;
	cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='lego legotxt legoact' contenteditable='true'>
<div class='mark' id='mark' contenteditable='false'></div>
</div>

我认为，您不希望这种情况发生。标记不是您要编辑的内容的一部分。要解决此问题，可以使用包装的div：

$('.input').focus();

.wrapper {
  background: #ddd;
  width: 70%;
  margin: 14px;
  position: relative;
}

.mark {
  position: absolute;
  right: -9px; top: -9px;
  width: 14px; height: 14px;
  border: 2px solid white;
  border-radius: 50%;
  background: red;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class='input' contenteditable='true'></div>
  <div class='mark'></div>
</div>

Answer 2

为什么光标位于右侧而不是左侧？

contenteditable用于纯文本。父级有contenteditable，但子级是HTML元素。现在，光标的位置取决于markup/HTML的元素try结构。

示例：如果您在contenteditable中有两个孩子，如下所示，光标将显示在mark2附近。

<div class='lego legotxt legoact' contenteditable='true'>
    <div class='mark2'></div> <!-- Cursor will be displayed at the starting of this div -->
    <div class='mark1'></div>
</div>

如何解决此问题？

检查：https://code.i-harness.com/en/q/5f5a87

它具有完整的解决方案。

光标位于右侧而不是左侧

2 个答案: