如何在键入时连续加粗div中的文本

我有一个待办事项应用程序，要求我添加更多功能，例如：添加一些粗体和斜体文本按钮。在输入中，在我按下粗体按钮后，将要键入的文本将变为粗体，使上一个文本(在我按下Bold按钮之前的文本(保持原样，规则。我知道没有办法在输入中加粗一段文本，所以我用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"的内容，然后按下Bold按钮，然后键入一个字母。您将看到div得到以下innerHTML:letter+cool+boldbletter。光标设置在div内容的开头。请帮助我，或者至少给我一个提示，以完成想要的行为！我已经花了3-4个小时了，我准备放弃。。。

编辑：我想我没有说清楚：我不想让div的整个内容都是粗体，而只是其中的一部分。如果没有按下按钮，将要写入的文本应该是规则的，如果按下粗体按钮，将写入的文本应是粗体，与Italic按钮相同。也许如果同时选择粗体和斜体，未来的文本应该是粗体和斜体。但这是另一个问题。。。我想要的一个例子是https://html-online.com/editor/。删除默认文本，只在左侧面板上写单词，并尝试使用上面的粗体、斜体按钮。在左侧面板中，将显示HTML生成的代码。我需要同样的功能。。。

为了在选择"bold"时使文本变为粗体，请从当前选择中获取范围并在其中插入元素"strong"。

let range=window.getSelection.getRangeAt(0);
let elem=document.createElement('strong');
elem.innerHTML='&#8203;'
range.insertNode(elem);

这将使文本变为粗体，斜体选项也是如此。现在，当您需要禁用它时，问题就来了，因为我必须清除选择中的当前范围，并将范围设置为"div"的末尾，然后插入新元素"span"(我用span表示普通文本(。

同样，我也处理了以下情况

当粗体和斜体同时按下时(您需要存储上一个元素(
当按下回车键时(div被创造了，并且制造了问题，所以我不得不设置keydownlistener，并使用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='&#8203;'
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='&#8203;'
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>

是的，这是有办法的，因为你可以像一样使用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。

希望这能对你有所帮助。

相关内容

最新更新

热门标签：