我有一個待辦事項應用程序，要求我添加更多功能，例如：添加一些用于粗體和斜體文本的按鈕。在輸入中，按下“粗體”按鈕后，要輸入的文本將變為粗體，而前一個文本（按下“粗體”按鈕之前的文本）將保持常規狀態。我知道無法將輸入中的文本部分加粗，因此我用 div 模擬了輸入：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 中寫下“cool”之類的內容，然后按粗體按鈕，然后鍵入一個字母。你會看到 div 得到了這個innerHTML：letter+cool+boldletter。并且光標設置在div內容的開頭。請幫助我或至少給出一個提示來完成想要的行為！我已經花了3-4個小時了，我準備放棄了......編輯：我想我沒有說清楚：我不想使 div 的整個內容變為粗體，而只是其中的一部分/部分/部分。如果沒有按下任何按鈕，則要寫入的文本應該是常規的，如果按下粗體按鈕，則要寫入的文本應該是粗體，與斜體按鈕相同。也許如果同時選擇粗體和斜體，則未來的文本應該是粗體和斜體。但這是另一個問題......我想要的一個例子是https://html-online.com/editor/。刪除默認文本，只在左側面板上寫字，然后嘗試使用上面的粗體、斜體按鈕。左側面板中將顯示 HTML 生成的代碼。我需要相同的功能...
2 回答
泛舟湖上清波郎朗
TA貢獻1818條經驗 獲得超3個贊
為了在選擇“粗體”時使文本變為粗體，請從當前選擇范圍中獲取范圍并在其中插入元素“strong”。
let range=window.getSelection.getRangeAt(0);
let elem=document.createElement('strong');
elem.innerHTML='​'
range.insertNode(elem);
這將使文本變為粗體，同樣也適用于斜體選項?，F在，當您需要禁用它時，問題就出現了，因為我必須清除選擇中的當前范圍，并將范圍設置為“div”的末尾，并插入新元素“span”（我將 span 用于普通文本）。
同樣我也處理過以下情況
當粗體和斜體按下時（在這種情況下您需要存儲以前的元素）
當按下 Enter 時（ div 正在被創建并產生問題，所以我必須設置 keydown 偵聽器并使用 document.execCommand 不創建 div 而是創建 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;
}
<div id="content" contenteditable="true"></div><br>
<button id="boldBtn" class="font-style">Bold</button>
<button id="italicBtn" class="font-style">Italic</button>
月關寶盒
TA貢獻1772條經驗 獲得超5個贊
是的，有一個解決辦法，因為你可以使用 jquery 來解決這個問題
<script>
$(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或如果您有 id 則寫為#id。
希望這可以幫助你。
- 2 回答
- 0 關注
- 155 瀏覽
添加回答
舉報
0/150
提交
取消