div {
border: 3px solid black;
}
span {
border: 2px solid blue;
}<div contenteditable>
<span contenteditable id="haha"><i>asd</i></span>
</div>I want to focus on #haha, but it only works if I move the element outside the div
div {
border: 3px solid black;
}
span {
border: 2px solid blue;
}<div contenteditable>
</div>
<span contenteditable id="haha"><i>asd</i></span>Currently using this this code for the focus, if there a way to focus on the span element even if it's inside the div?
document.querySelector(`#haha`).focus();
Try setting tabindex="0". It allows items which normally are not focusable to receive focus
div {
border: 3px solid black;
}
span {
border: 2px solid blue;
}
span:focus{
border-color: green;
}<div contenteditable>
<span tabindex="0" contenteditable id="haha"><i>asd</i></span>
</div>Try document.getElementById("haha") (notice I removed the '#')
The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.
EDIT:
Looks like manipulating the tabindex allows this to work:
myFunction = function() {
let x = document.getElementById("haha");
x.setAttribute('tabindex', '0');
x.focus();
}
myFunction();<div contenteditable>
<span contenteditable="true" id="haha">asd</span>
</div>
<button class="bold">Bold</button>
<div contenteditable="true">
whatever
</div>
<button class="bold">Bold</button>You need to add some text into the div. Then they'll each have their own content to edit.
div[contenteditable] {
border: 3px solid black;
}
span {
border: 2px solid blue;
}<div contenteditable>div<span contenteditable id="haha">span</span></div>