有沒有辦法讓文本區域部分可編輯？ （只能編輯文本的一部分）

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個文字區域 一個只讀和另一個編輯一個重疊所以看起來其只有一個