如何防止在html中插入内容可编辑的文本?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (120)

我有一个内容可满足的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>?

我试着加入contenteditable="false"<a>但这也增加了其他一些怪癖。

现在,我能想到的最好的方法就是使用&zwnj;链接之前和之后-这将防止将文本添加到<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>&zwnj;
</div>

提问于
用户回答回答于

是否考虑暂时移除a元素时,contenteditable获取焦点,然后在失去焦点时将其预先挂起?

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>

用户回答回答于

创建另一个元素(<span>(例如)在<div>并将其设置为contenteditabletrue。然后设置<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>

扫码关注云+社区

领取腾讯云代金券