CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
user2950370
user2950370

Reputation: 117

Stop contenteditable from defocusing

I'm currently working on implementing Froala text editor into my website.

All looks good except for the fact that when i click the button_bar div or it's children, the contenteditable div unfocuses. This is a problem because i have a background color applied to the focus state of the contenteditable div.

How can i stop the contenteditable div from deselecting, when clicking on the child buttons of the sibling div?

A visual representation would look a little like this..

<div class='editor'>

    <div class="button_bar">
        <button>
        <button>
        <button>
        etc
    </div>

    <div contenteditable="true" class="content_area">
    </div>
</div>

Any ideas? thanks.

Upvotes: 2

Views: 321

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

Try using:

SEE DEMO

$('.editor').on('click', function(e){
    if($(e.target).is('button'))
        $(this).find('div[contenteditable]').focus();
});

Upvotes: 1

cbreezier
cbreezier

Reputation: 1304

You can make the div focused again upon clicking any of the buttons. There is a slight gap where focus is lost and immediately regained though.

$('.button_bar button').click(function (e) {
    console.log('clicked');
    $('#content').focus(); // if we give the contendeditable div an id of 'content'
});

Upvotes: 0

Related Questions