8

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

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

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

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

这是一个用于试验的示例 jsFiddle。

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

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

谢谢阅读。

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

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

4

2 回答 2

4

我只知道一种“工作方法”。该方法需要使用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

于 2012-08-07T18:42:26.820 回答
3

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

学分：

查找相对于元素的鼠标位置

于 2012-08-07T17:59:00.913 回答