只需单击一个按钮即可粗体选择文本框

Question

我目前有这样的代码：https://jsbin.com/hocisirovo/edit?html,css,js,output

使用该按钮时，它会将文本框中的整个文本加粗。我如何才能只加粗我在文本框中选择的内容？最简单的方法是使用execCommand，但我不能使用它。

任何帮助都是非常感谢的。

谢谢!

Answer 1

我不太明白你的问题，但是你可以使用一个可编辑的div来使你的文本部分加粗。

<html>
<head>
<script>
function getSelectionText() {
 var text = "";
 if (window.getSelection) {
  text = window.getSelection().toString();
        }
        return text;
    }
function boldSelected(){
 var textBox = document.getElementById("textbox");
 var text = textBox.innerHTML;
 var boldText = getSelectionText();
 var offset1 = text.indexOf(boldText);
 var offset2 = offset1 + boldText.length;
 var str1 = text.substring(0,offset1);
 var str2 = text.substring(offset2,text.length);
 textBox.innerHTML=str1+"<b>"+boldText+"</b>"+str2;
}
function undoBold(){
 if(document.getElementById("textbox").innerHTML == "<b></b>")
 document.getElementById("textbox").innerHTML == "";
}
</script>
</head>
<body>
<div onkeypress="undoBold()" contentEditable="true" id="textbox" style="width:30%; border:1px solid #0a0a0a;padding:3px;"></div></br>
<button onclick="boldSelected()">Bold</button>
</body>
</html>