测试光标是否在文本区域的第一行（使用软换行符）

Question

给定一个内容像这样流动的文本区域

–––––––––––––––––––––––––– |这是一些文本，其中 | |像这样包裹。 | ––––––––––––––––––––––––––

如何判断文本光标是否在文本区域的第一行？

显然，如果想查看光标是否出现在第一个换行符之前，检查换行符 (\n) 是可行的，但测试“软”换行符似乎更具挑战性。

这是一个示例jsFiddle to experiment with。

我还没有想出策略，但我怀疑它可能涉及将文本复制到光标位置到克隆的文本区域（或 div）中，并根据需要设置宽度不包。如果克隆区域的宽度小于原始区域的宽度，则光标似乎必须位于第一行。可能有更简单的选择，更优雅的选择，或者（最好的）现有且经过充分测试的解决方案。

目标浏览器是 Webkit (Chrome/Safari) 和 Firefox。 IE。 IE 兼容性目前不是问题（如果这有什么不同的话）。

感谢阅读。

编辑：寻找文本插入符号的行号，而不是鼠标光标。

falsarella 给出了一个很好的答案，突出了问题中的歧义。我正在寻找的是文本光标（“插入符号”可能是一个更好的词）是否在第一行。我已经更新了问题和the jsFiddle 来反映。

Answer 1

我只知道一种“工作方法”。该方法需要使用textarea 的“cols”属性。长话短说，将cols设置为您想要的宽度，然后将光标位置和地板分开，看看它是否小于1，因此它=第1行！

如果我只是给你看一个代码示例，可能会更容易解释。

$("textarea").live("keyup", function(e) {
    if ($("textarea").attr("cols")) {
        var cols = parseInt($("textarea").attr("cols")),
            curPos = $('textarea').prop("selectionStart"),
            result = Math.floor(curPos/cols);
        var msg = (result < 1) ? "Cursor is on the First line!" : "Cursor is on the line #"+(result+1);
        console.log($("p").text(msg).text());
    };
});​

但是，这可能仍然需要一些有线数学，因为当光标仅位于第一行的末尾时，某些 col 大小可能仍会显示“第 2 行”（从技术上讲，这仍然是正确的，因为任何字符都会掉到第 2 行）

jsFiddle

Answer 2

因为 15 是行高，所以这行得通（在 Firefox 中测试）：

http://jsfiddle.net/h46jh/12/

$("textarea").click(function (evt) {
  cursor_position = evt.pageY - $('textarea').offset().top;
  if (cursor_position <= 15) {
    alert("first line");
  } else {
    alert("other line");
  }
});

学分：

Find mouse position relative to element