Question

我想将焦点设置为b标签（＆lt; b＆gt; [焦点应该在这里]＆lt; / b＆gt;）。
我的预期结果是进入div的b标签有焦点，如果我写，那么字符是粗体这不可能吗？我怎么能这样做？

想法来自这里：
focus an element created on the fly

HTML：

<div id="editor" class="editor" contentEditable="true">Hallo</div>

JS onDomready：

var input = document.createElement("b");                 //create it
document.getElementById('editor').appendChild(input);    //append it
input.focus();                                           //focus it

<小时/> 我的解决方案归功于 A1rPun ：
add：'input.tabIndex = 1;'并听取以下键。

HTML：

<h1>You can start typing</h1>
<div id="editor" class="editor" contentEditable="true">Hallo</div>

JS

window.onload = function() {    
    var input = document.createElement("b");                 //create it
    document.getElementById('editor').appendChild(input);    //append it
    input.tabIndex = 1;
    input.focus();

    var addKeyEvent = function(e) {
        //console.log('add Key');

        var key = e.which || e.keyCode;
        this.innerHTML += String.fromCharCode(key);
    };
    var addLeaveEvent = function(e) {
        //console.log('blur');

        // remove the 'addKeyEvent' handler
        e.target.removeEventListener('keydown', addKeyEvent);

        // remove this handler
        e.target.removeEventListener(e.type, arguments.callee);
    };

    input.addEventListener('keypress', addKeyEvent);
    input.addEventListener('blur', addLeaveEvent);
};

Answer 1

您可以添加tabIndex属性以允许元素聚焦。

input.tabIndex = 1;
input.focus();//now you can set the focus

jsfiddle

编辑：

我认为解决问题的最佳方法是使用font-weight: bold设置输入标记的样式。

Answer 2

我不得不通过在粗体区域内添加一个空格来作弊，因为我无法让它在空元素上工作。

这可以通过将选择器移动到contentEditable中的最后一个元素内来实现，因为粗体元素是最后添加的元素。

可以对其进行编辑，以便将重点放在任何元素上。

http://jsfiddle.net/dnzajx21/3/

function appendB(){
    var bold = document.createElement("b");  
    bold.innerHTML = "&nbsp;";
    //create it

    document.getElementById('editor').appendChild(bold);    //append it
    setFocus();
}

function setFocus() {
    var el = document.getElementById("editor");
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStartAfter(el.lastChild);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}

我采用的SetFocus函数来自这个问题：How to set caret(cursor) position in contenteditable element (div)?

JS - 专注于b标签

2 个答案:

jsfiddle