jsFiddle

Question

鉴于textarea的内容像这样流动

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

如何判断文本光标是否位于textarea的第一行？

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

以下是jsFiddle to experiment with示例。

我还没有提出一个策略，但我怀疑它可能涉及复制文本直到光标位置进入克隆的textarea（或div），并且只要需要它就使宽度变宽所以它不会包裹。如果克隆区域的宽度小于原始宽度，则光标似乎必须位于第一行。可能有一个更简单的选择，更优雅的东西，或（最重要的）现有的，经过良好测试的解决方案。

目标浏览器是Webkit（Chrome / Safari）＆amp; Firefox浏览器。即IE兼容性目前不是问题（如果这有任何区别）。

感谢阅读。

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

falsarella给出了一个很好的答案，突出了问题的含糊不清。我想要的是文本光标（“插入符号”可能是一个更好的词）是否在第一行。我已更新问题并the jsFiddle以反映。

Answer 1

将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

Answer 2

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

然而，这可能仍然需要一些有线数学，因为当光标只是在第一行的END时，一些col大小仍然可以说“第2行”（技术上仍然是正确的，因为任何字符都会下降到第2行）

测试光标是否位于textarea的第一行（带有软换行符）

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

2 个答案:

jsFiddle