我有一个 contenteditable div,它有格式选项。我希望能够单击,说粗体按钮,然后插入 <span class="bold">
和 </span>
分别在我光标的左侧和右侧。我相信我已经做到了。但是,我不知道如何将光标放在范围内,以便用户可以开始输入粗体文本。
我目前正在使用的功能:
function bold(text,clearSelection) {
text = text.replace(/\r\n/g,"<br>");
var sel, range, html;
var tn = false;
//Here i am adding the span element
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
tn = document.createElement("span");
tn.className="bold";
tn.innerHTML=text;
range.insertNode(tn);
}
}
if(clearSelection){
//if the selection length is longer than 0, move cursor to end of selection
if(sel.toString().length >0){
range = window.getSelection().getRangeAt(0);
range.setStart(range.endContainer,range.endOffset);
document.getElementById('text').focus();
} else {
/*Do something if the selection length is zero to place the cursor inside the span?*/
}
}
}
编辑:以下结束了工作
if(clearSelection){
//if the selection length is longer than 0, move cursor to end of selection
if(sel.toString().length >0){
range = window.getSelection().getRangeAt(0);
range.setStart(range.endContainer,range.endOffset);
document.getElementById('text').focus();
} else {
if(tn!==false){
range.selectNodeContents(tn);
document.getElementById('text').focus();
}
}
}
最佳答案
没有 fiddle 可以尝试,但是如何将 var tn = ... 放在第一个 if 语句之上,然后在其上使用 focus(),例如
var tn = false;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
...
tn = document.createElement("span");
...
}
}
if(clearSelection){
if(sel.toString().length >0){
} else {
/*Do something if the selection length is zero to place the cursor inside the span?*/
if (tn !== false) {
tn.focus();
}
}
}
关于javascript - 如何使用 Javascript(在可编辑的 div 中)在新添加的空范围内设置光标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14594837/