javascript set focus on contenteditable area using data- attribute and value

Question

I've got a template full of contenteditable areas that may or maynot already have id attributes. The one difference is that they all contain unique data- values so I'd like to use them to help me target/focus my cursor programically on specific areas for editing.

If I store the data- value in a var this way:

textArea[0] = this.getAttribute("data-id");

and my user looses focus on the contenteditable area they are currently work in, how can I force the cursor back to it?

document.[data-id=textArea[0]].focus();

Thank you for your time.

Answer 1

If you use vanilla js, you can write something like:

document.querySelectorAll('[data-id="' + dataId + '"]')[0].focus()

(check this answer on how to select elements by attribute)

If you can use Jquery you can just have:

$('[data-id="' + dataId + '"]').focus();

You can check also this fiddle in case