有没有办法让文本区域部分可编辑？ （只能编辑文本的一部分）

Question

我刚刚遇到这样的情况，它将是一个优雅的解决方案，只有部分文本区域（以前加载了文本）是可编辑的，而其他部分不是（“变灰“， 可以这么说）。

这一切都可能通过使用一般的JavaScript？

我会使用jQuery。

Answer 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].*?") 
    + "$" 
); 

Answer 2

有趣的想法，但不幸的是，文本区域内的文本必须统一处理，即您不能禁用文本区域内容的一个小节。

但是，您确实有选择。如果您可以识别需要禁用的文本，则可以将其添加为DOM元素（即div），然后将其放置在文本区域内。

您可以暗示该div位于文本区域内部，通过使文本区域变大并使用位置：相对/绝对样式将div移动到文本区域上。或者，您可以删除文本区域的边框，并将其放在也包含div w /“disabled”文本的容器中。

Answer 3

如果您使用的是纯文本元素，您将无法设置所需内容的样式（根据内容是否可编辑）。充其量你可以检查你的用户试图更改的内容是否在黑名单或白名单中，然后停止编辑或不相应。您也可能会提供一些视觉反馈，如警告消息“不能这样做”。

我的建议是利用contenteditable属性，这可能需要更多时间来设计风格，但从长远角度来看，它可以为您带来更大的灵活性。

你可以设计一个div元素来看起来很像你所需要的textarea，然后用可编辑的跨度来设置是否可以编辑一个特定的文本块。然后，您可以使用JavaScript命令（参考上面的链接）或使用“保存”按钮来检索这些内容，将其设置为您实际textarea的值（您可能已隐藏）并将页面恢复正常。

使用以下代码作为粗略示例。

<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> 

Answer 4

我建议，而不是试图在input内容分解成可编辑/不可编辑内容的子字符串，您使用HTML元素的contentEditable属性，并使用JavaScript来传递编辑值转换为页面中其他地方隐藏的input。

Answer 5

好了，你可以做这样的事情。这段代码效率很低，我只是想概述一下这个概念。

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> 

这会使用您的想法 “标记”。总体思路是说好的，是用户试图在我们的标记之一中编辑的文本范围？显然，每次使用正则表达式时，按下按键并不是确定这种情况的最佳方法，我不会忽略箭头键等等，但这会给您一个大致的想法。

Answer 6

在父元素，你可以设置边框为1px固体灰，然后在这里面，把

1）的textarea（修改CSS到没有边界） 2）标签（无边框以及）

在这种情况下，它将看起来像1）和2）中的两个文本在一起，因为它们被放置在一个盒子中。 1）虽然另一个灰显，但是可编辑。

Answer 7

我建议2个文字区域 一个只读和另一个编辑一个重叠所以看起来其只有一个