我刚刚遇到一种情况，其中只有部分文本区域（之前加载了文本）可编辑，而其他部分则不可编辑（可以这么说，“变灰”），这将是一个优雅的解决方案。
一般使用 javascript 是否可以做到这一点？
我会使用 jQuery。
你可以这样做（只是一个概述的想法，没有代码）：
设计一个与整个文本匹配的正则表达式。对于不可修改的部分使用固定字符串，对于可修改的部分使用
[\s\S]*?^$/^This is fixed text\. Now something editable:[\s\S]*?Now fixed again\.$/
现在对
keyuppaste对于每个相关事件，检查正则表达式是否仍然匹配。
如果没有，请取消活动。
实际上，这应该会停止对正则表达式中的文字部分进行修改，从而使文本的某些部分变为只读。
不要忘记在表单发布之后在服务器端测试字符串 - 永远不要相信客户端无法发送无效值。
编辑
您可以使用正则表达式引用函数从字符串动态构建该正则表达式，这应该可以为您省去很多麻烦。
function regexQuote(s) { return s.replace(/[\[\]^$*+?{}.|\\]/g, "\\$&") }
用法
var re = new Regex(
"^" +
[regexQuote(fixedPart1), regexQuote(fixedPart2)].join("[\\s\\S].*?")
+ "$"
);
如果您使用纯文本区域元素，您将无法设置所需内容的样式（基于该内容是否可编辑）。最好的情况是，您可以检查用户尝试更改的内容是否在黑名单或白名单中，然后相应地停止编辑。您还可以提供一些视觉反馈，例如警告消息“您不能这样做”。
我的建议是利用 contenteditable 属性，这可能需要更多的时间来设计样式，但从长远来看会给你更大的灵活性。
您可以将 div 元素设置为看起来很像您所需的文本区域，然后使用其中的可编辑范围来设置是否可以编辑特定的文本块。然后，您可以使用 JavaScript 命令（请参阅上面的链接）或使用“保存”按钮来检索此内容，将其设置为实际文本区域（您可以隐藏）的值，然后正常发布页面。
使用以下代码作为粗略示例。
<div id="editable-content">
<span id="block1" class="editable" contenteditable="true">This is some editable content which will </span>
<span id="block2" class="non-editable">quickly be followed by some non-editable content</span>
</div>
<div style="display: none;">
<textarea id="PostedContent"></textarea>
</div>
<div>
<input id="save-page" type="submit" value="Save Page" />
</div>
<script type="text/javascript">
$(function () {
$('#save-page').click(function () {
$('#PostedContent').val($('#editable-content').text());
});
});
</script>
搜索后发现让文本区域部分可编辑真的很难
这是我用于此要求的代码
input
{
width:100%;
border:0px solid;
outline:none
}
<!DOCTYPE html>
<html>
<div style="padding: 2px;border:1px solid #ccc;width: 82%;max-height:100px;min-height: 51px;overflow:auto;outline: none;resize: both;" contenteditable="true" unselectable="on">
<input placeholder="enter prefix..." value="editable postfix..." ></input>
<div id='unEditable' style="background-color:yellow;width: fit-content;padding-left:10px;padding-right:10px;border-radius:10px;height: fit-content;" contenteditable="false" unselectable="off" onkeyup="" >
fixed content non-editable
</div>
<input placeholder="enter postfix..." value="editable prefix..." style='width:97%'></input>
</div>
</html>嗯，你可以做这样的事情。这段代码效率非常低，我只是想概述一下这个概念。
JS：
$(function () {
var tb = $("#t").get(0);
$("#t").keydown(function (event) {
var start = tb.selectionStart;
var end = tb.selectionEnd;
var reg = new RegExp("(@{.+?})", "g");
var amatch = null;
while ((amatch = reg.exec(tb.value)) != null) {
var thisMatchStart = amatch.index;
var thisMatchEnd = amatch.index + amatch[0].length;
if (start <= thisMatchStart && end > thisMatchStart) {
event.preventDefault();
return false;
}
else if (start > thisMatchStart && start < thisMatchEnd) {
event.preventDefault();
return false;
}
}
});
});
HTML
<textarea id="t" rows=5 cols="80">Hello this is a test @{stuff}
this part is editable @{other stuff}
</textarea>
这使用了“标记”的概念。总体思路是说，好吧，用户尝试编辑的文本范围是否在我们的标记之一内？显然，每次按下键时使用正则表达式并不是确定这一点的最佳方法，我不会忽略箭头键等，但这给了您一个总体思路。
有趣的想法，但遗憾的是，必须统一处理文本区域内的文本，即您不能禁用文本区域内容的一小部分。
不过，你确实有选择。如果您可以识别需要禁用的文本，则可以将其添加为 DOM 元素（即 div），然后以暗示其位于文本区域内的方式放置它。
您可以通过增大文本区域并使用位置：相对/绝对样式将 div 移动到文本区域上方来暗示该 div 位于文本区域内。或者，您可以删除文本区域上的边框，并将其放在还包含带有“禁用”文本的 div 的容器上。
我建议，不要尝试将
inputcontentEditableinput在父元素中，您可以将边框设置为 1px 纯灰色，然后在其中放置
1）textarea（修改css使其没有边框） 2）标签（也没有边框）
在这种情况下，1) 和 2) 中的文本看起来像是在一起的，因为它们被放置在一个框中。 1) 可以编辑，而另一个则呈灰色。
我必须对输入标签执行类似的操作，但将其应用于文本区域标签。您可以创建一个基本的 Javascript 函数，将文本区域的值设置为您想要的任何值（如果它低于特定长度）。这样，该文本就永远不会被删除。我使用了 Javascript，所以我不必加载 JQuery，但使用 JQuery 也可以很容易地完成相同的想法。
<textarea name="test-input" maxlength="600" id="test-input" style="width:700px;">Text I don't want to change:</textarea>var input = document.getElementById("test-input");
input.addEventListener("input", editInputValue);
function editInputValue(e) {
if (e.target.value.length < 28) {
e.target.value = "Text I don't want to change:";
}
}
我建议两个文本区域 一个是只读的，另一个是可编辑的，重叠，所以它看起来像是唯一的一个