TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超13個(gè)贊
不是使整個(gè) DIV 可編輯，而是將其分解為單獨(dú)的跨度，以便您可以指定單個(gè)可編輯性。
<div id="textarea"><span contenteditable>Hello world</span><span style="color: blue">!</span>
</div>
TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊
你還沒(méi)有真正提供足夠的東西讓我們繼續(xù) - 例如。什么是藍(lán)色，什么不是？藍(lán)色文字總是感嘆號(hào)嗎？它總是在最后嗎？
聽(tīng)起來(lái)您需要構(gòu)建一個(gè)簡(jiǎn)單的輕量級(jí)代碼編輯器并應(yīng)用您想要的規(guī)則。其工作方式是在與“顯示”div 相同的空間中創(chuàng)建一個(gè)透明的可編輯 div?？删庉?textarea 的內(nèi)容是不可見(jiàn)的，而“顯示”div 的內(nèi)容是可見(jiàn)的。對(duì)于每個(gè)擊鍵，您獲取可編輯文本區(qū)域的內(nèi)容并將其寫入“顯示”div 并應(yīng)用任何自定義規(guī)則。這是一個(gè)簡(jiǎn)單的小提琴，顯示了我的意思：
https://jsfiddle.net/ymdrfupb/1/
const editable = document.querySelector('.editor > [contenteditable]');
const display = document.querySelector('.editor > .display');
function setDisplayContent(text) {
// wrap any non-alphanumeric trailing characters with a blue span
display.innerHTML = text.replace(/([^\w]+)$/, '<span class="blue">$1</span>');
}
editable.addEventListener('input', (ev) => {
setDisplayContent(ev.target.innerHTML);
});
setDisplayContent(editable.innerHTML);
舉報(bào)