0

to visualize my issue, I created the following html structure:

  1. a father div
  2. a children div

Both are with the same attributes: contenteditable="true" tabindex="0".

main.html:

<html>
<div>
    <div contenteditable="true" tabindex="0">
        firstDivText
        <div contenteditable="true" tabindex="0">
            secondDivText
        </div>
    </div>
</div>
</html>

Problem:

Navigating with tabs only (tabindex is 0 so its allowed), I can navigate to father and child with no problem.

When focus (given from tab) is on the father element, I can immediatly start typing to modify its context (contentEditable true).

But when focus is on the child element, I must click it before I can modify the text!

Question:

  1. Why is this happening?
  2. How can I fix it so that which element that is currently on focus will "receive" the key strokes?

Don't want to avoid using contentEditable nor to use jquery :S

  • Possible duplicate of [Focusing on nested contenteditable element](https://stackoverflow.com/questions/40907091/focusing-on-nested-contenteditable-element) – connexo Aug 18 '19 at 12:52

1 Answers1

0

You better use inputs and avoid content editable you can style it to look the same. 

.myInput{
    background:rgba(0,0,0,0);
    border:none;
}

edit: if you really must you can fire click event on focus

$(".Mycontenteditable").focus(function(){
  $(this).click();
});
nab
  • 568
  • 8
  • 20
  • Hi, I hate jQuery lol I must use the contentEditable for other parts of the main project :S any chance you know a different way that's not a work around? –  Aug 18 '19 at 12:49
  • not really although it works here https://codepen.io/TrentWalton/pen/avWVPr – nab Aug 18 '19 at 12:54
  • Yeah, it's the nesting that messes it up. I'm looking for a short idomatic solution –  Aug 18 '19 at 13:11