在通過jscript編輯內容後保留插入符號位置

我有一個可以理解的div，它的內容在每個文本更改後通過javascript進行編輯（textchange.js），比如添加html標籤（只有span標籤用於更改某些詞的顏色），並在這裏和那裏添加或刪除一些空格，但是我的問題是，由於內容在用戶編輯時正在改變，所以在每次按鍵之後插入符都會改變其位置，這使得幾乎不可能寫出單個單詞。我現在正在尋找一種方法來防止這種跳躍，我已經想過添加一個特殊的字符，在編輯它之前，不會將它用作插入符號位置處的一種標記，它完成後，將插入符號放回到這個位置，但由於我正在使用正則表達式很多（每個文本更改後大約25次），這個特殊字符幾乎會毀掉它們中的每一個，我將不得不添加類似\x40?每一個地方，這不會好看，並明確所有：在通過jscript編輯內容後保留插入符號位置

/\s<span class="b0">hello\sworld</span>/g

到：

/\s\x40?<span class="b0">\x40?h\x40?e\x40?l\x40?l\x40?o\x40?\s\x40?w\x40?o\x40?r\x40?l\x40?d\x40?</span>/g

我不知道是否有幫助，但這裏是內容如何改變的例子（每按一次鍵）：

foo +++ <span class="c3">bar</span> - baz -<span class="c0">qux</span>

到：

<span class="c1">foo</span> + <span class="c3">bar</span> - <span class="c1">baz</span> * <span class="c0">qux</span>

我會爲每一個建議感激，提示或暗示如何解決這個問題，或者更好的方式來做這件事情。

謝謝:)

來源

2013-06-21 user2429631

[這個問題]（http://stackoverflow.com/questions/2871081/jquery-setting-cursor-position-in- contenteditable-div）討論如何設置位置。搞清楚把它放在哪裏完全是另一招 – Joe

您可以創建一個將添加特殊字符，否則可讀的正則表達式的抽象。這很簡單，大概需要對當前代碼進行最小限度的更改。

雖然可能有更優雅的解決方案。如果你永遠不會替換在中間有一個插入符的文本 - 如repl|aced - 你可以將原始字符串分成兩部分，並在兩部分上應用過濾器。插入符號的位置仍然在第一個要點的長度上。

如果你確實需要更換即使在插入位置，也可以從分割開始。之後，再一次運行濾鏡。如果過濾器匹配，請將插入符號移動到預定的相對位置 - 例如用××代替++|+（表示插入的管道）。你甚至可以放過它，這將導致××|。或者每個過濾器都有一個硬編碼的相關插入符號，如果您進行代碼替換，這非常棒，因爲您可以將插入符號移動到正確的位置（例如，將<|i></i>替換爲<em>|<em>;請注意將插入符號方便地移至用戶可能需要的位置）。

來源

2014-01-03 21:14:19

也許這不是最好的解決方案，但我創建了2個div，一個顯示文本和其他編輯它，第二個在第一個之上，並且具有一定程度的透明度。

像這樣：

<div style="position: absolute; left: 48px; top: 16px;" unselectable="on" onselectstart="return false"> 
    <code id="code_show">Type here.</code> 
</div> 
<div style="position: absolute; left: 48px; top: 16px;"> 
    <span style="opacity:0.33"><code id="code_area" contenteditable="true" onkeyup="colorize();">Type here.</code></span> 
</div>

的onselectstart="return false"和unselectable="on"確保第一個是不可選。 onkeyup="colorize();"確保每次用戶按下某個鍵以編輯文本時調用javascript函數colorize。

所以你必須定義它來更新code_show的內容，以匹配code_area中的顏色。

例如，該代碼繪製每一個字RED在紅色：

<script> 
function colorize(){ 
    var code_area= document.getElementById('code_area'); 
    var code_show= document.getElementById('code_show'); 

    var inner= code_area.innerHTML; 
    inner= inner.replace(/RED/g,"<span style=\"color: red\">RED</span>"); 
    code_show.innerHTML= inner; 
} 
</script>

來源

2016-06-03 14:12:44 Autopawn

在通過jscript編輯內容後保留插入符號位置

回答

相關問題