JS-聚焦到b标记

JS - focus to a b tag

本文关键字：标记 聚焦 JS-      更新时间：2023-09-26

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

创意来自这里：
聚焦在飞行上创建的元素



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

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

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

jsfiddle

编辑：

我认为解决问题的最好方法是用font-weight: bold设计输入标签的样式。

我不得不在粗体区域内添加一个空格，因为我无法让它处理空元素。

这是通过将选择器移动到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函数来自于这个问题：如何在contenteditable元素（div）中设置插入符号（光标）的位置？

相关文章：