Question

我有一个具有格式选项的contenteditable div。我希望能够点击，说出粗体按钮，并分别在光标的左侧和右侧插入<span class="bold">和</span>。我相信我已成功做到了这一点。但是，我不知道如何将光标放在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();
        }
    }
}

Answer 1

没有小提琴可以尝试，但如果将var tn = ...放在first 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（在一个可信的div中）将光标设置在新添加的空跨度内？

1 个答案: