How to highlight a line in a textarea?

Question

css

There is a textarea. There are its contents and line numbers on the left. By clicking on the line number, you need to highlight the entire line. Lines are determined not by hyphenation, but by height. In general, everything is already ready:

The problem is this: it is implemented through a div that overrides the input field through position:absolute. This means that in this place you will not be able to enter and edit text. It would be easier if you had to highlight the text on newlines (\n) - then you can use some jquery plugin that highlights the text in the input field from and to the indicated characters. But the customer wants exactly as in the screenshot, and in this case it becomes problematic to find out in which place which order of the character is located, even with a monospaced font.
I've tried catching click and other events on the div element and passing it to the textarea via new Event followed by elem.dispatchEvent(event); - zero reaction. The input field catches all events but nothing happens, the cursor is not set to the text.
What to do? Maybe there is another way to highlight the line?
I witness the question is simple, but I have been sitting on it for the fifth day. For several years of experience, I have seen and done a lot, but it is impossible to implement such a simple chip.

Answer 1

z-index and highlight from below jsfiddle.net/jr0vhbdv
UPD: highlight coordinates can be calculated using TextRange, but there may be cross-browser issues.