阻止用户从输入中删除特定文本

Question

我在内部有一个可预测的文本:

div{
  padding: 10px;
  border: 1px solid black;
}
.some-class{
  background: yellow;
  padding: 0px 5px;
}

<div contenteditable=true>Hello <span class="some-class">Dont delete me!</span> people!</div>

我想阻止用户从中删除<span class="some-class">Dont delete me!</span>.

我猜我应该检查当用户在onChange事件上按回空格时要删除的文本.但我不知道如何检查删除的内容是否只是字母H或整个div<span class="some-class">Dont delete me!</span>

Answer 1

而不是分配contenteditable=true给整个容器,将内容分解为单独的span元素,并将其分配到那里:

div{
  padding: 10px;
  border: 1px solid black;
}
.some-class{
  background: yellow;
  padding: 0px 5px;
}

<div><span contenteditable=true>Hello </span><span class="some-class" contenteditable=false>Dont delete me!</span><span contenteditable=true> people!</span></div>

编辑:如果您不想更改标记,可以使用jQuery搜索不应删除的文本字符串,然后确保它会保留任何删除它的尝试.

$('#div').on('input', function() {
  var span = $('.some-class').text();
  if (span.indexOf('Dont delete me!') < 0) {
    $('.some-class').text('Dont delete me!');
  }
});

div {
  padding: 10px;
  border: 1px solid black;
}

.some-class {
  background: yellow;
  padding: 0px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div" contenteditable=true>Hello <span class="some-class">Dont delete me!</span> people!</div>