6

書式設定オプションを持つ 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();
        }
    }
}
4

1 に答える 1

2

試すフィドルはありませんが、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();
        }

    }
}
于 2013-01-30T00:53:11.400 に答える