how color only one line in textarea jquery

Question

I need color the selected row with jquery. Suppose I have a textarea which there are into a line. I need tp color the line that was clicked when the user click on the textarea. So I use this code:

$(document).on("mouseup", '#scroll_bar', function(eventData) { console.log("DELLLLLLLLL"); var scrollPosition = $(this).scrollTop() var lineHeight = $(this).css("line-height"); lineHeight = parseInt(lineHeight.substring(0, lineHeight.length - 2)); var line = Math.floor((eventData.offsetY + scrollPosition) / lineHeight); alert($(this).val().split("\n")[line]); });

But I find the line that the user clicked but I don't how selected with a color like orange. Anyone can help me?

You can't color parts of a textarea only, it's all or nothing. — adeneo
– adeneo, Commented Nov 3, 2016 at 15:35
@adeneo you are correct, but what about a background which doesn't cover the entire textarea, e.g. using a background image or linear-gradient? Think more creative ;-) (like in the answer of daanvanham) — Rogier Spieker
– Rogier Spieker, Commented Nov 3, 2016 at 16:28
@RogierSpieker - that's actually quite nifty, and an upvote from me, but you still can't color a line in a textarea, but I'll admit that linear backgrounds is trickery that gives the same impression. — adeneo
– adeneo, Commented Nov 3, 2016 at 16:45

daanvanham · Accepted Answer · 2016-11-03 16:24:48Z

It's possible to color one (or more) line(s) of the textarea with a background-image.

Here you have an example how you can do it with linear-gradient as background-image.

background: linear-gradient(to bottom, #fff 0px, red 0px, red 22px, #fff 22px); background-position: 20px;

Working example

I tried to do it, but it doesn't scroll when you scroll textarea.

Collectives™ on Stack Overflow

how color only one line in textarea jquery

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related