HTML文本区域如何防止部分文本被删除

Question

我正在使用HTML/JavaScript创建一个终端窗口，并使用textarea作为输入框。我想防止textarea中的文本被删除。例如，如果我在textarea中有文本“C:\>Random Code”，我希望防止用户删除“C:\>”文本。是否可以使用javascript实现此功能？

- Josh Wood

---

也许你可以使用文本区域的onchange事件来检查其内容的长度，然后如果内容较小且不以"C:>"开头，则替换字符串？ - Sebastien

Answer 1

假设使用jQuery，此脚本将监听按键事件，如果任何必需的文本找不到（例如：用户试图删除它），则会立即添加回去：

var requiredText = 'C:>';
$('textarea').on('input',function() {
    if (String($(this).val()).indexOf(requiredText) == -1) {
        $(this).val(requiredText);
    }
}

- Bryce

---

哇，这真是太棒了！我从没想过我可以这样使用indexOf！这很酷也很有用。谢谢！ - Sebastien

这段代码仅检查所需文本是否在输入文本中；但它并没有检查以下两点：1）文本是否以所需文本开头（在这种情况下是必需的）2）可能会破坏用户输入，例如，如果输入值为“C:>somefolder/somefile.txt”，用户删除“:>”=>文本区域的新值将是“C:>”-从用户的角度来看，这可能真的很令人沮丧。 - Blasius Secundus

Answer 2

您无法使文本区域的一部分不可编辑（只能整个控件都不可编辑）。

您可以使用各种JavaScript技巧（监听keypress事件并使用event.preventDefault取消事件，如果用户想要做某些您不想允许的事情）。

另一个解决方案是，不是拥有输入的不可删除部分，而是自动附加（或前置）预定义字符串到用户输入中（并以某种方式方便地显示给用户）。

更新：

所以，我的解决方案如下：

var requiredText = 'C:>';
$('textarea').on('keyup',function(event) {
    if (GetSelectionStart(this) < requiredText.length){
event.preventDefault();
event.stopPropagation();
}

}

其中 GetSelectionStart 是一个函数，用于告知选定文本的开始位置（如果没有选定文本范围，则为插入符号位置）。有关一些可能的实现，请参见例如在字符数中获取文本区域中的插入符号位置

此函数假设所需文本始终位于字符串开头。但是，它当然可以针对更复杂的情况进行适应。

- Blasius Secundus