首頁猿問如何在輸入時(shí)連續(xù)加粗div中的文本

如何在輸入時(shí)連續(xù)加粗div中的文本

JavaScript

翻翻過去那場(chǎng)雪 2022-06-09 11:00:45

我有一個(gè)待辦事項(xiàng)應(yīng)用程序，我被要求添加更多功能，例如：為粗體和斜體文本添加一些按鈕。在輸入中，當(dāng)我按下粗體按鈕后，將要輸入的文本以粗體顯示，而將之前的文本（我按下粗體按鈕之前的文本）保持原樣，常規(guī)。我知道沒有辦法在輸入中加粗一段文本，所以我用 div 模擬了一個(gè)輸入：const div = document.querySelector('div');div.innerHTML = '';const bold = document.getElementById('boldBtn');const italic = document.getElementById('italicBtn')bold.style.backgroundColor = 'white';let previousText = '';let boldString = '';boldBtn.addEventListener('click', () => { boldBtn.classList.toggle('bold-selected'); if (boldBtn.classList.contains('bold-selected')) { boldBtn.style.backgroundColor = "gray"; previousText = div.innerHTML; console.log(previousText) div.addEventListener('keydown', boldText) } else { bold.style.backgroundColor = "white"; div.removeEventListener('keydown', boldText); }})function boldText(e) { div.innerHTML = div.innerHTML.substr(1) console.log("Previous text: " + previousText); const NOT_ALLOWED = ['Backspace', 'Shift', 'Control', 'Alt']; if (!NOT_ALLOWED.includes(e.key)) { boldString += e.key; console.log("Bold text: " + boldString) console.log(previousText + boldString) div.innerHTML = previousText + "<strong>" + boldString + "</strong>" }}div { border: 1px solid black; width: 200px; height: 20px; } .font-style { border: 1px solid blue }<div contenteditable="true"></div><button id="boldBtn" class="font-style">Bold</button><button id="italicBtn" class="font-style">Italic</button>嘗試在 div 中寫“酷”之類的內(nèi)容，然后按粗體按鈕，然后鍵入一個(gè)字母。你會(huì)看到 div 得到了這個(gè) innerHTML：letter+cool+boldletter。并且光標(biāo)設(shè)置在 div 內(nèi)容的開頭。請(qǐng)幫助我或至少給出一個(gè)提示來完成想要的行為！我已經(jīng)花了3-4個(gè)小時(shí)，我準(zhǔn)備放棄了......編輯：我想我沒有說清楚：我不想讓 div 的全部?jī)?nèi)容變粗，而只是它的一部分/部分/部分。如果沒有按下按鈕，要寫的文字應(yīng)該是規(guī)則的，如果按下粗體按鈕，要寫的文字應(yīng)該是粗體，與斜體按鈕相同。也許如果同時(shí)選擇粗體和斜體，未來的文本應(yīng)該是粗體和斜體。但這是另一個(gè)問題......我想要的一個(gè)例子是https://html-online.com/editor/。刪除默認(rèn)文本，只在左側(cè)面板上寫字，并嘗試使用上面的粗體、斜體按鈕。在左側(cè)面板中將有 HTML 生成的代碼。我需要相同的功能...

查看完整描述

2 回答

POPMUISE

TA貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個(gè)贊

為了在您選擇“粗體”時(shí)使文本變?yōu)榇煮w，請(qǐng)從當(dāng)前選擇中獲取范圍并在其中插入元素“強(qiáng)”。

let range=window.getSelection.getRangeAt(0);

let elem=document.createElement('strong');

elem.innerHTML=''

range.insertNode(elem);

這將使文本變?yōu)榇煮w，同樣適用于斜體選項(xiàng)?，F(xiàn)在問題來了，當(dāng)您需要禁用它時(shí)，我必須清除當(dāng)前選擇范圍并將范圍設(shè)置為“div”的末尾并插入新元素“span”（我將 span 用于普通文本）。

同樣，我也處理了以下情況

當(dāng)粗體和斜體同時(shí)按下時(shí)（在這種情況下，您需要存儲(chǔ)先前的元素）
當(dāng)按下回車時(shí)（div被創(chuàng)建并產(chǎn)生問題，所以我不得不設(shè)置keydown監(jiān)聽器并使用document.execCommand不創(chuàng)建div而是創(chuàng)建br）

如果有人有興趣更新我的解決方案以使其有效，歡迎您

var boldButton=document.querySelector('#boldBtn'),

italicButton=document.querySelector('#italicBtn'),

contentDiv=document.querySelector('#content'),

bold=false,italic=false,range,prevElement,selection;

;

contentDiv.addEventListener('keydown',function(e){

if (e.keyCode === 13) {

window.document.execCommand('insertLineBreak', false, null);

range=window.getSelection().getRangeAt(0);

range.collapse();

prevElement=undefined;

if(bold) addElement('strong');

if(italic) addElement('i');

e.preventDefault();

return false;

}

return true;

});

boldButton.addEventListener('click',function(){

debugger

bold=!bold;

boldButton.classList.toggle('border-black');

if(!bold)

disable('bold');

else

addElement('strong');

});

italicButton.addEventListener('click',function(){

debugger;

italic=!italic;

italicButton.classList.toggle('border-black');

if(!italic)

disable('italic');

else

addElement('i');

});

function addElement(element){

if(!selection)selection=window.getSelection()

range=selection.getRangeAt(0);

let elem=document.createElement(element);

elem.innerHTML=''

if(prevElement)

range.selectNodeContents(prevElement);

range.collapse();

range.insertNode(elem);

elem.focus();

prevElement=elem;

}

function disable(elem){

if(italic && bold) return;

setRangeAtEnd();

let element=document.createElement('span');

if(italic)

element=document.createElement('i');

else if(bold)

element=document.createElement('strong');

element.innerHTML=''

range.insertNode(element);

range.setStart(element,1);

element.focus();

}

function setRangeAtEnd(){

let childNodes=contentDiv.childNodes;

range=document.createRange();

range.setStartAfter(childNodes[childNodes.length-1]);

prevElement=undefined;

if(!selection)selection=window.getSelection();

selection.removeAllRanges();

selection.addRange(range);

}

#content{

border:1px solid black;

height:150px;

}

.border-black{

border:2px dotted black;

}

<button id="italicBtn" class="font-style">Italic</button>

反對(duì) 回復(fù) 2022-06-09

一只斗牛犬

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超2個(gè)贊

是的，有辦法解決這個(gè)問題，因?yàn)槟梢允褂?jquery

$(document).ready(function () {

$("#boldBtn").click( function() {

$("your input id or class").keyup(function () {

$("your input id or class").css("fontWeight", "bold");

});

</script>

如果your input id or class你有課，那么把它寫成.classname或者如果你有一個(gè) id write is as #id。

希望這可以幫助你。

反對(duì) 回復(fù) 2022-06-09

2 回答
0 關(guān)注
188 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何在輸入時(shí)連續(xù)加粗div中的文本

如何在輸入時(shí)連續(xù)加粗div中的文本

2 回答

添加回答