Javascript JS-聚焦到b标记

我想将焦点设置为b标记（[焦点应在此处]）。
我的预期结果是，div中的b标记具有焦点，如果我要写的话，字符是粗体的。
这不可能吗？我该怎么做

想法来自这里：

HTML:

---

我的解决方案多亏了A1rPun:
添加：“input.tabIndex=1；”听下面的键。

HTML:

---

您可以添加一个

tabIndex

属性，以允许聚焦元素

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

编辑：

---

我认为解决问题的最佳方法是使用

font-weight:bold

设置输入标记的样式。我不得不通过在粗体区域内添加一个空格来进行一些欺骗，因为我无法让它处理空元素

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

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

---

我使用的SetFocus函数来自以下问题：

除了交互式输入元素外，您不能真正关注其他任何内容。是否要滚动到该元素？您不能对其设置焦点。我的想法是用按钮添加b标记，用户可以将下一个字符加粗。

tabIndex

不设置焦点，它只允许元素通过键盘选项卡操作接收焦点。@nnnnnnnn我知道，它允许

focus

函数对元素设置焦点。我明白了。但是在您的演示中，它不允许直接在

元素中键入内容，而OP正试图这样做。（至少，不是在Chrome中。）@nnnnnn是的，你是对的，我只是想表明你几乎可以聚焦每一个元素。我已经更新了小提琴与Op的要求这是好的。我不想让一件事来处理这件事。好主意，谢谢你的工作。基本上这是一个很好的解决方案。在我的特殊情况下，空间有点令人不安。我会把这个保存在我的枕骨里。

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

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

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);
};

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

function appendB(){
    var bold = document.createElement("b");  
    bold.innerHTML = " ";
    //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();
}