JS - focus to a b tag

Question

I want to set the focus to a b tag (<b>[focus should be here]</b>).
My expected result was that the b tag into the div has the focus and if I would write, that the characters are bold.
Is this impossible? How can I do this?

Idea was from here:
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

My Solution thanks to A1rPun:
add: 'input.tabIndex = 1;' and listen for the follow keys.

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

You can't really *focus* on anything other than an interactive input element. — Pointy, Sep 26 '14 at 13:40
Do you maybe want to scroll to that element? You cannot set focus on it. — Aleksandar Gajic, Sep 26 '14 at 13:40
My Idea was the add the b tag with a button and the user can write the next characters bold. — Heinrich, Sep 26 '14 at 13:41

A1rPun · Accepted Answer · 2014-09-26T13:58:57.277

2

You can add a tabIndex property to allow the element to be focused.

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

jsfiddle

Edit:

I think the best way to solve your problem is to style an input tag with font-weight: bold.

edited Sep 26 '14 at 13:58

answered Sep 26 '14 at 13:43

A1rPun

16,287
7
57
90

`tabIndex` doesn't _set_ focus, it just allows an element to receive focus via keyboard tab operations. – nnnnnn Sep 26 '14 at 13:44
@nnnnnn I know, It allows the `focus` function to set the focus on the element. – A1rPun Sep 26 '14 at 13:45
I see. But in your demo it doesn't then allow typing directly into the `` element, which is what the OP is trying to do. (At least, not in Chrome.) – nnnnnn Sep 26 '14 at 13:46
@nnnnnn Yes, you are right, I just wanted to show that you can focus almost every element. I've updated the fiddle with Op's requirement – A1rPun Sep 26 '14 at 13:49
This is nice. I didn't thing about an event to handle this. Nice Idea thanks A1rPun – Heinrich Sep 26 '14 at 13:51

score 1 · Answer 2 · edited May 23 '17 at 12:05

I had to cheat a little by adding an empty space inside the bold area because I couldn't get it to work on the empty element.

This works by moving the selector inside the last element in the contentEditable since the bold element is the last one added.

It can be edited to work on putting the focus on any element.

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

The SetFocus function I took was from this question: How to set caret(cursor) position in contenteditable element (div)?

Hello Kesty thanks for your work around. Basically this is a nice solution. In my special case the space is a little bit disturbing. I will save this in my occiput. — Heinrich, Sep 26 '14 at 14:31

JS - focus to a b tag

2 Answers2

jsfiddle