Question

在编辑<span>元素中的<div>元素时，文本光标位置未更新，因此我决定发布此Q＆amp;以防万一其他人遇到同样的问题。为什么文本光标没有更新它的位置？当它没有包含在<div>元素中时，它会更新。请看下面的示例代码。文本光标似乎＆＃34;冻结＆＃34;在第1位（或在span的第一个字母之后）。

备注：

<span>元素有contenteditable="true"。
contenteditable未在<div>元素上设置。

＆＃13;

$('.editableSpan').on('click keydown', function(e) {
  if ($(this).css('background-color') !== 'rgba(0, 0, 0, 0)') {
    $(this).css('background-color', '');
		$(this).text('');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>This is a div with <span class="editableSpan" contenteditable="true" style="background-color: rgb(250, 197, 28);">an editable span</span>.</div>

<span class="editableSpan" contenteditable="true" style="background-color: rgb(250, 197, 28);">This is an editable span</span>

＆＃13;

Answer 1

对此问题的一个简单修复是将display: inline-block;设置为<span>元素。但是，我不确定为什么会这样。请随意添加到此Q＆amp;用来形容为什么会这样。感谢。

＆＃13;

$('.editableSpan').on('click keydown', function(e) {
  if ($(this).css('background-color') !== 'rgba(0, 0, 0, 0)') {
    $(this).css('background-color', '');
		$(this).text('');
  }
});

＆＃13;

.editableSpan {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>This is a div with <span class="editableSpan" contenteditable="true" style="background-color: rgb(250, 197, 28);">an editable span</span>.</div>

<span class="editableSpan" contenteditable="true" style="background-color: rgb(250, 197, 28);">This is an editable span</span>

＆＃13;

文本光标不在div元素内的contentedable span中更新

1 个答案: