堆棧內存溢出
  簡體   English   中英

有沒有辦法讓文本區域部分可編輯？ （僅使部分文本可編輯）

[英]Is there a way to make a text area partially editable? (make only portions of the text editable)

 原文  2011-03-26 19:48:50  3   8    javascript/ jquery/ textarea

問題描述

我剛剛遇到一種情況，它只是一個優雅的解決方案，只有部分文本區域（以前加載文本）可編輯而其他部分不是（“灰色”，可以這么說）。

通常使用javascript可以實現這一點嗎？

我會使用jQuery。

8 個解決方案

解決方案1
 9  2011-03-26 19:57:39

如果您使用的是純文本區域元素，則無法設置所需內容的樣式（基於該內容是否可編輯）。 您最多可以檢查用戶嘗試更改的內容是在黑名單還是白名單上，然后相應地停止編輯。 您可能還會提供一些視覺反饋，例如警告信息“您不能這樣做”。

我的建議是利用contenteditable屬性，這可能需要更多的時間來設置樣式，但從長遠來看，它將為您提供更大的靈活性。

您可以將div元素設置為與所需的textarea類似，然后使用其中的可編輯跨度來設置是否可以編輯特定的文本塊。 然后，您可以使用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>

解決方案2
 9 已采納  2011-03-26 20:10:22

你可以這樣做（只是一個概述的想法，沒有代碼）：

設計與整個文本匹配的正則表達式。 對不可修改的部分使用固定字符串，並使用[\\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].*?")
   + "$"
);

解決方案3
 2  2011-03-26 21:31:41

好吧，你可以做這樣的事情。 這段代碼效率很低，我只想概述這個概念。

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並不是確定這一點的最佳方法，我不會忽略箭頭鍵等等，但這給了你一個大致的想法。

解決方案4
 1  2011-03-26 19:55:11

有趣的想法，但遺憾的是，文本區域內的文本必須統一對待，即您不能禁用文本區域內容的子部分。

但是，你有選擇權。 如果您可以識別需要禁用的文本，則可以將其添加為DOM元素（即div），然后將其定位為暗示它位於文本區域內的方式。

您可以通過使文本區域變大並使用position：relative / absolute styles在文本區域上移動div來暗示此div位於文本區域內。 或者，您可以刪除文本區域上的邊框並將其放在一個容器中，該容器也包含帶有“禁用”文本的div。

解決方案5
 1  2011-03-26 19:58:01

我建議，不要試圖將input的內容分解為可編輯/不可編輯內容的子字符串，而是使用HTML元素的contentEditable屬性，並使用JavaScript將該編輯后的值傳遞給其他地方的隱藏input在頁面中。

解決方案6
 0  2014-08-22 08:39:38

在父元素中，您可以將邊框設置為1px實心灰色，然后在其中放置

1）textarea（修改css沒有邊框）2）標簽（也沒有邊框）

在這種情況下，它看起來像1）和2）中的兩個文本在一起，因為它們被放在一個盒子里。 1）雖然可以編輯，而另一個是灰色的。

解決方案7
 0  2017-07-28 17:42:09

我建議兩個textareas一個readonly和另一個可編輯的，重疊，所以它看起來像它唯一的一個

解決方案8
 0  2019-08-29 11:04:22

搜索后發現很難使文本區域部分可編輯

這是我用於此要求的代碼 

 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript在文本區域中創建一個不可編輯的單詞 如何在文本區域中使用一些字符是不可編輯的 為什么我無法在Angle 5和Typescript中使文本區域部分不可編輯？ 使文本框的“僅一部分”不可編輯 如何使內容可編輯div表現得像文本區域？ 如何制作文本區域，以便我們只能復制和粘貼它不可編輯 可編輯（jQuery Inplace Editor）：如何使未選中的文本可編輯 ContentTools如何使區域不可編輯 JavaScript高亮顯示/使文本可在焦點上編輯 如何使日歷事件文本在單擊時可編輯？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM