Click event on textarea selected line

Question

0.00/5 (No votes)

See more:

I have Textbox, TextArea and search button in my MVC view page

depends on the input entered by user from Textbox control I am making ajax call and appending data to the TextArea Control

I am Appending ID, firstname, lastname to the TextArea control in multiple lines(if I get 10 users I will arrange data in 10 lines)

Now If I click on firstline(firstuser) data, then it should display firstname,lastname of selected user in other textboxes how to make calls on dynamic generated text

What I have tried:

<div class="col-lg-4">
        <textarea readonly rows="15" cols="100" id="userDetails" style="resize: none;overflow:auto;color:gray" ></textarea>
    </div>

$("#userDetails").click(function () {
            alert("clickedon textarea");
        });

from above I am clicking on TextArea control, the event is firing, but I want to fire event on selected line

Posted 28-Dec-18 11:02am

Divyay208

Updated 28-Dec-18 11:37am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Accepted Answer · 2018-12-28T11:38:00

Very interesting requirement. Let assume each lines are being separated by newline '\n', on textarea click, you can write something like below

1. Get the value in the textarea
2. Get the row number where the cursor landed on
3. Get the text from the selected row (t.value.split("\n")[rowNumber-1])

JavaScript

function getline()
{
    var t = $("#t")[0]; //1
    let rowNumber = t.value.substr(0, t.selectionStart).split("\n").length; //2

//do something with the selected line t.value.split("\n")[rowNumber-1]
    console.log(t.value.split("\n")[rowNumber-1]);
    alert(t.value.split("\n")[rowNumber-1]);
}

Here is an example: CP_textarea - JSFiddle[^]

Tested on: Firefox

Reference:
javascript - Getting Line Number In Text Area - Stack Overflow[^]