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

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>