有没有办法使文本区域部分可编辑？ （仅使部分文本可编辑）
Posted
技术标签:
【中文标题】有没有办法使文本区域部分可编辑？ （仅使部分文本可编辑）【英文标题】：Is there a way to make a text area partially editable? (make only portions of the text editable) 【发布时间】：2011-07-23 15:01:05 【问题描述】：我刚刚遇到了一种情况，在这种情况下，只有部分文本区域（之前加载了文本）可编辑，而其他部分不可编辑（可以说是“变灰”），这将是一个优雅的解决方案。
这完全可以通过使用javascript来实现吗？
我会使用 jQuery。
【问题讨论】：
不可编辑的内容会存在于文本的单独部分中，还是会被固定（例如：在开头或结尾）？ @Mohammed 考虑到我的具体情况，理想的解决方案是批量编辑文本。这些部分可以通过包含在一些标记之间来识别（例如 @ ） 您好 Kensai，您最终实施了解决方案吗？我很想知道它，因为我现在正在尝试这样做。谢谢！ @user418775 很抱歉，我没有。这个项目在我开始之前就结束了。 【参考方案1】：你可以这样做（只是一个概述的想法，没有代码）：
设计一个匹配整个文本的正则表达式。不可修改部分使用固定字符串，可修改部分使用[\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].*?")
+ "$"
);
【讨论】：
这是一个使用“输入”事件的实现（遗憾的是 IE9 不完全支持）：jsfiddle.net/un6c950h。使用“keyup”和“paste”事件会引入跳跃行为，其中值更改然后恢复：jsfiddle.net/un6c950h/2 @Peter 我们如何添加一个或多个常量值（例如，Jack 先生喜欢 red color fruits）【参考方案2】：如果您使用的是纯文本区域元素，您将无法设置所需内容的样式（取决于该内容是否可编辑）。充其量您可以检查您的用户尝试更改的内容是否在黑名单或白名单中，然后相应地停止编辑。您还可以提供一些视觉反馈，例如“您不能这样做”的警告消息。
我的建议是利用 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>
【讨论】：
+1 这是一个不错的方法。但是，由于表单帖子完全依赖于 JavaScript，我建议也通过 JavaScript 设置contenteditable。我也不建议弹出消息框。闪烁背景颜色（或类似的东西）的干扰要小得多。
这很好，但在 IE9 中，在写入内容然后删除它方面有一种奇怪的行为（有时以下文本会返回，有时会留在原处，留下这个尴尬的空白之间）
哇。这是天才！我发现了这个：hallojs.org/demo/markdown，并结合你使用 contenteditable <span> 标签的方法，它工作得很好。我以为我将不得不花一到五天的时间来开发一个 html 文本编辑器来满足我的需要，但看起来只花了 5 分钟 :)【参考方案3】：
搜索后发现很难让文本区域部分可编辑
这是我用于此要求的代码
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>【讨论】：
【参考方案4】：嗯，你可以做这样的事情。这段代码效率很低，我只是想概述一下这个概念。
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>
这使用了您对“标记”的想法。一般的想法是说好的，用户试图在我们的标记之一内编辑的文本范围？显然，每次按下键时使用正则表达式并不是确定这一点的最佳方法，我不会忽略箭头键等，但这给了你一个大致的想法。
【讨论】：
【参考方案5】：有趣的想法，但遗憾的是，文本区域内的文本必须统一处理，即您不能禁用文本区域内容的子部分。
但是，您确实有选择。如果您可以识别需要禁用的文本，则可以将其添加为 DOM 元素（即 div），然后以暗示它位于文本区域内的方式定位它。
您可以通过使文本区域变大并使用 position: relative/absolute 样式将 div 移动到文本区域上来暗示此 div 位于文本区域内。或者，您可以移除文本区域的边框并将其放在一个容器上，该容器还包含带有“禁用”文本的 div。
【讨论】：
【参考方案6】：我建议，与其尝试将 input 的内容分解为可编辑/不可编辑内容的子字符串，不如使用 HTML 元素的 contentEditable 属性，并使用 JavaScript 来传递它将值编辑到页面其他位置的隐藏 input 中。
【讨论】：
【参考方案7】：在父元素中，您可以将边框设置为 1px 纯灰色，然后在其中放置
1) textarea (修改css不带边框) 2) 标签（也没有边框）
在这种情况下，1) 和 2) 中的两个文本看起来像在一起，因为它们被放置在一个框中。 1) 是可编辑的，而另一个是灰色的。
【讨论】：
【参考方案8】：我建议两个文本区域 一个是只读的，另一个是可编辑的，重叠，所以看起来只有一个
【讨论】：
以上是关于有没有办法使文本区域部分可编辑？ （仅使部分文本可编辑）的主要内容，如果未能解决你的问题，请参考以下文章