javascript - 测试光标是否在文本区域的第一行(使用软换行符)

Question

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

     ––––––––––––––––––––––––––    | This is some text, which |    | wraps like this.         |     ––––––––––––––––––––––––––

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

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

这是一个示例 jsFiddle to experiment with .

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

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

感谢阅读。

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

falsarella 给出了一个很好的答案，突出了问题中的歧义。我正在寻找的是文本光标(“caret”可能是一个更好的词)是否在第一行。我已经更新了问题和the jsFiddle反射(reflect)。

Answer 1

我只知道一种“工作方法”。该方法需要使用 textarea 的“cols”属性。长话短说，将cols设置成你想要的宽度，然后将光标位置除以floor，看是否小于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());
    };
});​

然而，这可能仍然需要一些连线数学，因为当光标只是在第一行的末尾时，某些列大小可能仍然会显示“第 2 行”(从技术上讲，这仍然是正确的，因为任何字符都会掉到第 2 行)

jsFiddle