javascript - 有没有办法使文本区域部分可编辑？ (仅使部分文本可编辑)

Question

我刚刚遇到了一种情况，其中只有文本区域的一部分(之前加载了文本)是可编辑的，而其他部分则不可编辑(可以说“变灰”)，这将是一个优雅的解决方案。

一般情况下使用 javascript 是否可以做到这一点？

我会使用 jQuery。

Answer 1

你可以这样做(只是一个概述的想法，没有代码):

设计一个与整个文本匹配的正则表达式。对于不可修改的部分使用固定字符串，对于可修改的部分使用[\s\S]*?。使用 ^ 和 $ 来锚定您的正则表达式。

/^This is fixed text\. Now something editable:[\s\S]*?Now fixed again\.$/

现在对 keyup 事件以及可能的其他事件(例如 paste)使用react。

对于每个相关事件，检查正则表达式是否仍然匹配。

如果没有，请取消事件。

实际上，这应该会停止对正则表达式中的文字部分进行修改，从而使文本的某些部分变为只读。

不要忘记在表单发布之后在服务器端测试字符串 - 永远不要相信客户端无法发送无效值。

<小时/>

编辑

您可以使用正则表达式引用函数从字符串动态构建该正则表达式，这应该可以为您省去很多麻烦。

function regexQuote(s) { return s.replace(/[\[\]^$*+?{}.|\\]/g, "\\$&") }

使用

var re = new Regex(
  "^" + 
  [regexQuote(fixedPart1), regexQuote(fixedPart2)].join("[\\s\\S].*?")
   + "$"
);