Question

我正在创建自己的聊天应用程序，其中我使用内容可编辑的div作为聊天框。我正在实现提及功能，其中我提到的是用span标记后跟空格（ ）的用户名，但我的问题是当我删除空格时我的光标移动到div的末尾。

有空格

＆＃13;

<html>

<head>
</head>

<body>
  <div contenteditable=true><span contenteditable='false'>UserName</span>&nbsp;</div>
</body>

</html>

＆＃13;

没有空间

＆＃13;

<html>

<head>
</head>

<body>
  <div contenteditable=true><span contenteditable='false'>UserName</span></div>
</body>

</html>

＆＃13;

这是我在代码中实现的方式，此错误仅在chrome中发生。

Answer 1

这实际上是浏览器中的错误，我有一个解决方法，但我不知道它对你有多大帮助，但这是我们能做的最好的据我所知。

div>span {
   display:inline-block;
}

<div contenteditable="true"><span contenteditable="true"><span contenteditable="false">UserName</span></span>&nbsp;</div>

没有空间

div>span {
  display:inline-block;
}

<div contenteditable="true"><span contenteditable="true"><span contenteditable="false">UserName</span></span></div>

如果您想要 完整的证明内容 ，那么这里有script组合: before伪的解决方案：

这里采用: before伪元素的宽度并将其添加到div元素padding-left。我已经使用脚本记住您的动态用户名。

var testBox = document.querySelector('.test'),
  pseudoBeforeWidth = window.getComputedStyle(testBox, ':before').width, //getting the width of the parent elemnts `:before`
  pseudoBeforeContent = window.getComputedStyle(testBox, ':before').content;

testBox.style.paddingLeft = pseudoBeforeWidth; //handing the width to the parent elemnts padding left style
var i = 0
var n = 0;
testBox.addEventListener('keydown', function(event) {
  const key = event.key; // const {key} = event; ES6+
  if ((key === "Backspace" || key === "Delete") && n == 0) {
    i++
    console.log(testBox.textContent, i, n);
    if (testBox.textContent == "" && i >= 2) {
      testBox.className += ' userhide ';
      testBox.style.paddingLeft = 0;
      n = 1;
    }
  }
});

div:before {
  content: attr(data-user);
  display: inline-block;
  position: absolute;
  left: 5px;
}

.test.userhide:before {
  display: none;
}

<div class="test" contenteditable="true" data-user="UserName"></div>

我希望这对你有所帮助。

Answer 2

分析

想一个简单的文本编辑器（记事本），你输入了三个字符 - TRY

现在，显而易见的是光标只能放在这里的4个位置，即：

在T
介于T和R之间
介于R和Y之间
在Y

原因仅仅是因为，这3个字符是这里唯一的可编辑字符，它们是3个单独的实体，无法进一步编辑/分离。例如，我们无法将光标放在字母“T＆＃39;”之间。并将┐和┌与其分开。

情况也是如此，因为 被清除contenteditable=true并将其设置为<div>，因此光标移动到div的末尾false <span>。因此，div是此处唯一的可编辑元素，而span则不是。因此，光标只能在一个可编辑的位置定位，该位置位于可编辑元素的开头（在本例中为div）或在其末尾，而不是。 / p>

由于div是一个块元素，当块元素占据其父元素的整个宽度时，光标将移动到页面的末尾。如果我们将width: 50%;设置为div，我们可以看到光标移动到页面中间。

解决方案

考虑到您对其他答案的评论，您需要将宽度保持为100%，解决方法是将div包含另一个也具有属性contenteditable=true的问题并保留将孩子div作为inline-block元素。

<div contenteditable=true>
  <div class="inl-blck" contenteditable=true><span contenteditable='false'>UserName</span>&nbsp;</div>
</div>

CODEPEN

说明

这里，父和子div都是可编辑的，其中父级占据整个宽度（100％），而子级是inline-block元素，它只占用其内容的空间。因此，清除 后，光标会移动到下一个可编辑内容的末尾，即子div。

请注意，您需要将子div和span以及 与代码中的同一行保持在一起，否则会在其中创建额外的字符（空格）部分，将进一步打破contenteditable。

希望这有帮助。

Answer 3

这可以帮助你

<div contenteditable=true style="display: inline-block;background: #000;color:#fff;"><span contenteditable=false>UserName</span>&nbsp;</div>

Answer 4

信不信道这个错误与实际HTML标记本身的空格有关。

这是一个有效的例子：

.username {
    margin-left: 10px;
}

<div contenteditable="true">
  <span contenteditable="false" class="username">Username</span>
</div>

通过简单地将结束div移动到下一行，我们将中断传递给html解析器。

从div

4 个答案:

分析

解决方案

说明