Question

我试图让文本区域中的每一行都可以点击，光标可以是默认值，也可以指针无关紧要。 jsfiddle

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

我想在每行点击文字时进行ajax调用。我可以编写所有的ajax功能，我想弄清楚的是点击文本中的每一行。是否可以使用文本区域或是否有其他替代方法。

修改

更确切地说，我在文本区域内使用<c:forEach items="${}" var=""> <c:out value="${} /></c:forEach>。它不完全是带有段落标记的文本。根据在此页面之前选择的输入，文本是动态的

Answer 1

您可能希望使用selectionStart来执行此操作。

这是一个例子。随意定制供您使用。这个应该让你开始。

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

Answer 2

如果我理解正确，您需要获取您点击的行的文字。如果是这样，那么以下内容适用于您的示例：

$("#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 - 从textarea

中点击的行中获取文字

代码将获取在textarea offsetY中单击鼠标的位置，并将其除以应用的line-height。使用Math.floor()，它将获得被点击的行，并在将行分割为"\n"时将其用作数组中的索引元素。

除了完成这项工作外，我还强制将行高设置为一个px设置值，以便我计算点击的行。

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

编辑 - textarea上的滚动条

假设textarea有一个滚动条，滚动条将“扭曲”offsetY值，你需要像这样添加当前滚动位置：

$("#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 - 使用滚动条

从textarea中的单击行中获取文本

我将CSS更新为固定高度以获得如下滚动条：

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

Answer 3

您可以在textarea中找到光标位置，找出所在的文本，然后执行您的ajax。也就是说，将元素（pre，a，input）分开并让每个点击功能触发您想要的ajax调用会更容易。

Answer 4

您可以将每一行放在一个p标签中并使用onclick：

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

点击文本区域中的文本

4 个答案:

DEMO - 从textarea

编辑 - textarea上的滚动条

DEMO - 使用滚动条