Question

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

这一般是否可以使用javascript？

我会使用jQuery。

Answer 1

如果您使用普通的textarea元素，则无法设置所需内容的样式（基于该内容是否可编辑）。您最多可以检查用户尝试更改的内容是在黑名单还是白名单上，然后相应地停止编辑。您可能还会提供一些视觉反馈，例如警告信息“您不能这样做”。

我的建议是利用contenteditable属性，这可能需要花费更多时间来设置样式，但从长远来看，它将为您提供更大的灵活性。

您可以将div元素设置为与所需的textarea类似，然后使用其中的可编辑跨度来设置是否可以编辑特定的文本块。然后，您可以使用JavaScript命令（请参阅上面的链接）或使用“保存”按钮检索此内容，将其设置为实际文本区域（您可以隐藏）的值，并正常发回您的页面。 / p>

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

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

你可以这样做（只是一个概述，没有代码）：

设计一个与整个文本匹配的正则表达式。对不可修改的部分使用固定字符串，并使用[\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 3

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

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>

这会使用你对“标记”的想法。一般的想法是说好的，是用户试图在我们的一个标记内编辑的文本范围？显然，每次按下键时使用regexp并不是确定这一点的最佳方法，我不会忽略箭头键等等，但这给了你一个大致的想法。

Answer 4

有趣的想法，但遗憾的是，文本区域内的文本必须统一对待，即您不能禁用文本区域内容的子部分。

但是你确实有选择。如果您可以识别需要禁用的文本，可以将其添加为DOM元素（即div），然后将其置于暗示它位于文本区域内的方式。

您可以通过使文本区域变大并使用position：relative / absolute styles在文本区域上移动div来暗示此div位于文本区域内。或者，您可以删除文本区域上的边框并将其放在同样包含带有“禁用”文本的div的容器中。

Answer 5

我建议，您不要试图将input的内容分解为可编辑/不可编辑内容的子字符串，而是使用HTML元素的contentEditable属性，并使用JavaScript将已编辑的值传递到页面中其他位置的隐藏input。

Answer 6

在父元素中，您可以将边框设置为1px实心灰色然后在其中，放置

1）textarea（修改css没有边框） 2）标签（也没有边框）

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

Answer 7

我会建议两个textareas 一个只读和另一个可编辑的重叠，所以看起来只有一个

Answer 8

搜索后，很难使文本区域部分可编辑

这是我用于此要求的代码

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>

有没有办法让文本区域部分可编辑？（仅使部分文本可编辑）

8 个答案:

有没有办法让文本区域部分可编辑？ （仅使部分文本可编辑）

8 个答案:

有没有办法让文本区域部分可编辑？（仅使部分文本可编辑）