防止在可编辑内容的html中插入文本
防止在可编辑内容的html中插入文本
提问于 2018-06-14 03:53:57
我有一个带有contenteditable的div，里面有一个链接：
<div contenteditable>
<a id="a">[$special.value$]</a>
</div>如果用户单击末尾的字段并开始键入，则新文本将插入到<a>中，而不是插入到它之后。
<div contenteditable>
<a id="a">[$special.value$] new text added here</a> instead of here
</div>如何确保在<a>之外添加新文本
我曾尝试在<a>上添加contenteditable="false"，但这添加了许多其他怪癖。
现在，我能想到的最好的办法就是在链接之前和之后使用‌ -这可以防止文本被添加到<a>中，但它会使光标移动有点奇怪(你必须额外的向左/右移动一段时间)
div[contenteditable] {
border: 1px solid #aaa;
}
a {
color: red;
}Normal
<div contenteditable>
<a id="a">[$special.value$]</a>
</div>
With zwnj
<div contenteditable>
<a id="a">[$special.value$]</a>‌
</div>
回答 2
Stack Overflow用户
发布于 2018-06-14 04:02:19
在<div>中创建另一个元素(例如<span> )，并将其contenteditable设置为true。然后将<div>设置为向左浮动，将<span>设置为显示为块元素。
div.container {
border: 1px solid #aaa;
}
a {
float: left;
color: red;
}
span[contenteditable] {
display: block;
width: 100%;
}<div class="container">
<a href="#" id="a">[$special.value$]</a>
<span contenteditable></span>
</div>
Stack Overflow用户
发布于 2018-06-14 04:05:08
您是否考虑过在contenteditable获得焦点时临时移除a元素，然后在失去焦点时将其重新挂起？
let old = "";
document.querySelector("div[contenteditable]").addEventListener("focus", function(){
old = this.innerHTML; // Store the current data
this.innerHTML = ""; // clear out the element
});
document.querySelector("div[contenteditable]").addEventListener("blur", function(){
// Set the new content to the old concatenated with the current
this.innerHTML = old + this.textContent;
});div[contenteditable] {
border: 1px solid #aaa;
}
a { color: red; }<div contenteditable>
<a id="a">[$special.value$]</a>
</div>
<p>...Hit [TAB] or click outside of element after typing...</p>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50845230
复制相关文章
相似问题