javascript - 如何停止退格键或删除键来删除光标之前的文本

Question

如果输入类型文本中前面的单词是“Hi Harry”，我试图阻止光标删除前面的单词。我试图限制光标删除文本，如果用户开始删除文本并且 匹配“Hi Harry”之前的文本，然后停止删除该文本。用户也不应该通过选择并键入另一个字符来覆盖“Hi Harry 文本”。用户不得通过任何操作删除或替换“Hi Harry”。

任何满足要求的解决方案都可能有所帮助。

.html

<input id="target" type="text" value="Hi Harry"> 

js

$( "#target").keydown(function(e) {
   if (e.which == 8 && e.target.value === "Hi Harry") { 
    // backspace or delete key

            return false;  

// here I want to stop cursor from deleting if user started deleting text and 
//text before it if matches "Hi Harry" then stop deleting this text.
        }

    });

Answer 1

正如您现在所知，为了防止用户使用 backspace 或 delete 进行删除，您可以在 e.which == 的事件上阻止Default 8 或 e.which == 46。

如果用户选择文本或在“Hi Harry”之间单击会怎样？您还需要处理一些文本选择事件。请参阅下面的代码片段^[1]:

// monitor key down function
var initialValue = $("#target").val();

$("#target").keydown(function(e) {
  if (e.target.selectionStart < initialValue.length) {
    //prevent user from typing stuff in between "Hi Harry"
    e.preventDefault();
    return;
  }
  if ((e.which == 8 || e.which == 46) && e.target.value === initialValue) {
    // backspace or delete key
    // backspace is 8, delete is 
    e.preventDefault();
  }
});
// monitor text selection and force to deselect
function handleSelections(e) {
  e.preventDefault();
  var endPoint = initialValue.length;
  if (e.target.selectionEnd > initialValue.length + 1) {
    endPoint = e.target.selectionEnd;
  }
  if (e.target.selectionStart < initialValue.length) {
    e.target.setSelectionRange(initialValue.length, endPoint);
  };
}
// prevent any selection of text until after "Hi Harry"
$("#target").get(0).addEventListener('select', handleSelections);
// prevent cursor positioning anywhere within "Hi Harry"
$("#target").get(0).addEventListener('click', handleSelections);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="target" type="text" value="Hi Harry">

^[1]在 Google Chrome 78 上测试