在textarea所选行上单击事件 [英] Click event on textarea selected line

问题描述

我的MVC视图页面中有Textbox，TextArea和搜索按钮

取决于用户从Textbox控件输入的输入，我正在进行ajax调用并将数据附加到TextArea控件

我在多行中将ID，名字，姓氏添加到TextArea控件中(如果我有10个用户，我将在10行中排列数据)

现在，如果我单击firstline(firstuser)数据，那么它应该在其他文本框中显示所选用户的名字，姓氏，以及如何在动态生成的文本上进行调用

我尝试过的事情:

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");
        });

从上面我单击TextArea控件，事件正在触发，但是我想在选定的行上触发事件

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

推荐答案

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

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

从上面我单击TextArea控件，事件正在触发，但是我想在选定的行上触发事件

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

非常有趣的要求.假设每一行都由换行符"\ n"分隔，在textarea单击时，您可以编写如下内容

1.在textarea中获取值
2.获取光标所在的行号
3.从选定的行中获取文本(t.value.split("\ n")[rowNumber-1])

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])

function getline()
{
    var t =

(" )[ 0 ]; // 1 let rowNumber = t.value.substr( 0 ，t.selectionStart).split(" ).length; // 2 // 使用选定的行t.value.split("\ n")[rowNumber-1] 控制台 .log(t.value.split(" )[rowNumber-1]); alert(t.value.split(" )[rowNumber-1]); }

("#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]); }

这是一个示例: CP_textarea-JSFiddle [ ^ ]

经过测试:Firefox

参考:
javascript-在文本区域中获取行号-堆栈溢出 [ ^ ]

Here is an example: CP_textarea - JSFiddle[^]

Tested on: Firefox

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

这篇关于在textarea所选行上单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！