Him*_*sal 9 html javascript css html5 contenteditable
我正在创建自己的聊天应用程序,其中我使用内容可编辑div为聊天框.我正在实现提及功能,其中我提到的用户名包裹在span标签后跟一个空格( )但我的问题是当我删除空格时我的光标移动到div的末尾.
与空间
<html>
<head>
</head>
<body>
<div contenteditable=true><span contenteditable='false'>UserName</span> </div>
</body>
</html>没有空间
<html>
<head>
</head>
<body>
<div contenteditable=true><span contenteditable='false'>UserName</span></div>
</body>
</html>这就是我在代码中实现的方式,而且这个bug只发生在chrome中.
这实际上是浏览器中的一个错误,我有一个解决方法,但我不知道它会对你有多大帮助,但这是我现在所知道的最好的.
div>span {
display:inline-block;
}<div contenteditable="true"><span contenteditable="true"><span contenteditable="false">UserName</span></span> </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>我希望这对你有所帮助.
想象一个简单的文本编辑器（记事本），您在其中输入了三个字符 -TRY
现在，很明显，光标只能放置在4个地方，它们是：
\n\n原因很简单，这 3 个字符是这里唯一可编辑的字符，并且它们是 3 个单独的实体，无法进一步编辑/分离。例如，我们不能将光标放在字母“T”之间并将“\xe2\x94\x90和”\xe2\x94\x8c与其分开。
您的情况也是如此，因为一旦 清除了 ，光标就会移动到 div 的末尾，因为 被contenteditable=true设置为<div>，并且被设置false为<span>。因此，div是这里唯一可编辑的元素，而span不是。因此，光标只能将自身定位在可编辑位置，该位置要么位于可编辑元素的开头（div在本例中），要么位于其末尾，而不是位于其间。
由于它div是块元素，因此当块元素占据其父元素的整个宽度时，光标将移动到页面末尾。width: 50%;如果我们设置为，我们可以看到光标移动到页面中间div。
考虑到您对其他答案的评论，您需要将宽度保持为，解决方案是将与另一个也具有该属性的答案一起100%包装，并将子项保留为元素。divcontenteditable=truedivinline-block
<div contenteditable=true>\n <div class="inl-blck" contenteditable=true><span contenteditable=\'false\'>UserName</span> </div>\n</div>\n在这里，父级和子级div都是可编辑的，其中父级占据整个宽度（100%），而子级是一个inline-block元素，仅占据其内容的空间。因此，一旦 被 清除，光标就会移动到下一个可编辑内容（即 child ）的末尾div。
请注意，您需要将子项div和span与 一起保留 在代码中的同一行，否则它将在该部分中创建额外的字符（空格），这将进一步破坏contenteditable。
希望这可以帮助。
\n| 归档时间： |
|
| 查看次数： |
654 次 |
| 最近记录： |