有没有办法让文本区域部分可编辑？ （只制作部分文字可编辑）
我刚刚遇到一种情况，它只是一个优雅的解决方案，只有部分文本区域（以前加载文本）可编辑而其他部分不是（“灰色”，可以这么说）。
通常使用javascript可以实现这一点吗？
我会使用jQuery。
你可以做到这一点（只是一个概述，没有代码）：
设计一个与整个文本匹配的正则表达式。 对不可修改的部分使用固定字符串，并使用[\s\S]*? 对于可修改的部分。 使用^和$来锚定正则表达式。
/^This is fixed text\. Now something editable:[\s\S]*?Now fixed again\.$/
现在对keyup事件做出反应，也可能对其他事件做出反应（比如paste ）。
对于每个相关事件，请检查正则表达式是否仍然匹配。
如果没有，请取消该活动。
实际上，这应该停止对正则表达式中文字部分的修改，从而使文本的某些部分成为只读。
不要忘记在表单发布后测试服务器端的字符串 – 永远不要相信客户端无法发送无效值。
编辑
您可以使用正则表达式引用函数从字符串动态构建该正则表达式，这可以为您节省很多麻烦。
function regexQuote(s) { return s.replace(/[\[\]^$*+?{}.|\\]/g, "\\$&") }
用法
var re = new Regex( "^" + [regexQuote(fixedPart1), regexQuote(fixedPart2)].join("[\\s\\S].*?") + "$" );
如果您使用的是纯文本区域元素，则无法设置所需内容的样式（基于该内容是否可编辑）。 您最多可以检查用户尝试更改的内容是在黑名单还是白名单上，然后相应地停止编辑。 您可能还会提供一些视觉反馈，例如警告信息“您不能这样做”。
我的建议是利用contenteditable属性，这可能需要更多的时间来设置样式，但从长远来看，它将为您提供更大的灵活性。
您可以将div元素设置为与所需的textarea类似，然后使用其中的可编辑跨度来设置是否可以编辑特定的文本块。 然后，您可以使用JavaScript命令（请参阅上面的链接）或使用“保存”按钮检索此内容，将其设置为实际文本区域（您可以隐藏）的值，并正常发回您的页面。
使用以下代码作为粗略示例。
This is some editable content which will quickly be followed by some non-editable content
好吧，你可以做这样的事情。 这段代码效率很低，我只想概述这个概念。
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
这使用了你的“标记”的概念。 一般的想法是说好的，是用户试图在我们的一个标记内编辑的文本范围？ 显然，每次按下键时使用regexp并不是确定这一点的最佳方法，我不会忽略箭头键等等，但这会给你一个大致的想法。
有趣的想法，但遗憾的是，文本区域内的文本必须统一对待，即您不能禁用文本区域内容的子部分。
但是，你有选择权。 如果您可以识别需要禁用的文本，可以将其添加为DOM元素（即div），然后将其定位为暗示它位于文本区域内的方式。
您可以通过使文本区域变大并使用position：relative / absolute styles在文本区域上移动div来暗示此div位于文本区域内。 或者，您可以删除文本区域上的边框并将其放在同样包含带有“已禁用”文本的div的容器中。
我建议，不要试图将input内容分解为可编辑/不可编辑内容的子字符串，而是使用HTML元素的contentEditable属性，并使用JavaScript将该编辑后的值传递给其他地方的隐藏input在页面中。
在父元素中，您可以将边框设置为1px实心灰色，然后在其中放置
1）textarea（修改css没有边框）2）标签（也没有边框）
在这种情况下，它看起来像1）和2）内的两个文本在一起，因为它们被放在一个盒子里。 1）虽然可以编辑，而另一个是灰色的。
我建议两个textareas一个readonly和另一个可编辑的，重叠，所以它看起来像它唯一的一个