on click of text in text area

问题

I am trying to make each row in text area clickable,, the cursor can be default or pointer doesn't matter. jsfiddle

<textarea rows="10" cols="45">
hello
world
</textarea>

I want to make an ajax call on click of text in each row. I can write all the ajax functionality, all I am trying to figure out is clicking each row in the text are. Is it possible with text area or is there any other alternative to this.

EDIT

To be more precise, I am using <c:forEach items="${}" var=""> <c:out value="${} /></c:forEach> inside the text area. Its not exactly the text with paragraph tag. The text is dynamic based on the input selected before this page

回答1:

If I understood you correctly, you want to get the text of the line you clicked on. If that is so, then the following works with your example:

$("#mytextArea").on("mouseup", function(eventData) {
    var lineHeight = $(this).css("line-height");
    lineHeight = parseInt(lineHeight.substring(0, lineHeight.length - 2));

    var line = Math.floor(eventData.offsetY / lineHeight);
    alert($(this).val().split("\n")[line]);
});

DEMO - Get Text from clicked line in textarea

The code will take the position the mouse was clicked in within the textarea offsetY and divide it by the applied line-height. Using Math.floor() it will get the line which was clicked and use it as the index element in the array when splitting the lines by "\n".

In addition to make this work I enforced the line-height to be a set px value to allow me to calculate the line clicked.

textarea{
    font-size: 15px;
    line-height: 15px;
}

Edit - Scrollbars on textarea

Assuming the textarea has a scrollbar, the scrollbar will "distort" the offsetY value and you need to add the current scroll position to it like this:

$("#mytextArea").on("mouseup", function(eventData) {
    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]);
});

DEMO - Get Text from clicked line in textarea with scrollbar

I updated the CSS to a fixed height to get a scrollbar like this:

textarea{
    font-size: 15px;
    line-height: 15px;
    height: 100px;    
}

回答2:

You would want to use selectionStart to do this.

Here is an example. Feel free to customize for your use. BUt this should get you started.

<textarea rows="10" cols="45" onkeyup="getLineNumber(this, document.getElementById('lineNo'));" onmouseup="this.onkeyup();"></textarea>
<div id="lineNo"></div>

<script>

    function getLineNumber(textarea, indicator) {

        indicator.innerHTML = textarea.value.substr(0, textarea.selectionStart).split("\n").length;
    }

</script>

回答3:

You can get the cursor position in the textarea, figure out what text that is in, then do your ajax. That being said it would be easier to just to separate elements (pre, a, input) and have each of their click function fire off the ajax call you want.

回答4:

You could put each line inside a p tag and use the onclick for that:

<p onclick="myFunction()">Hello</p>
<p onclick="myOtherFunction()">World</p>

来源：https://stackoverflow.com/questions/13574588/on-click-of-text-in-text-area

标签

jquery

html

textarea