通过单击按钮大胆选择文本框

时间:2016-02-23 12:38:28

标签: javascript html

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

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

感谢任何帮助。

谢谢!

1 个答案:

答案 0 :(得分:0)

我没有完全回答您的问题,但您可以使用可编辑的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>