测试光标是否在文本区域的第一行(带有软换行符) [英] Test if cursor is on the first line in a textarea (with soft-newlines)

问题描述

给出一个文本区域，其内容像这样流动

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

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

很明显，如果要查看光标是否在第一个换行符之前出现，则检查换行符(\n)是可行的，但是测试软"换行符似乎更具挑战性.

以下是示例 jsFiddle进行实验.

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

目标浏览器是Webkit(Chrome/Safari)&火狐浏览器. IE.暂时不考虑IE兼容性(如果有任何区别).

感谢阅读.

寻求文本插入符号的行号，而不是鼠标光标.

法萨雷拉(falsarella)给出了一个很好的答案，突显了这个问题的模棱两可.我要寻找的是文本光标(插入号"可能是一个更好的词)是否在第一行.我已经更新了问题，并 jsFiddle 进行了反映.

解决方案

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

但是，这可能仍需要进行一些有线数学运算，因为当光标仅位于第一行的末尾时，某些列大小仍可能会显示第二行"(从技术上讲，这仍然是正确的，因为任何字符都将落入第二行)

jsFiddle

Given a textarea with content that flows like this

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

How can one tell if the text-cursor is on the first line of the textarea?

Obviously, checking for a newline character (\n) works if one wants to see if the cursor appears before the first line break, but testing for a 'soft' line break seems more challenging.

Here is a sample jsFiddle to experiment with.

I have not yet come up with a strategy, but I suspect it may involve copying the text up until the cursor position into a cloned textarea (or div), and making the width as long as it needs to be so it doesn't wrap. If the cloned area has a width less than the original's width, then the cursor would seem to have to be on the first line. There may a simpler option, something more elegant, or (best of all) an existing and well-tested solution.

Target browsers are Webkit (Chrome/Safari) & Firefox. I.e. IE compatibility is not a concern at this time (if that makes any difference).

Thanks for reading.

EDIT: Seeking line number of text caret, not mouse cursor.

falsarella gave an excellent answer, that highlighted an ambiguity in the question. What I am seeking is whether the text cursor ("caret" may be a better word) is on the first line. I have updated the question and the jsFiddle to reflect.

解决方案

I only know of one "working method". The method requires use of textarea's "cols" attribute. Long story short, set the cols to the width you want, then divide the cursor position and floor it to see if it is less than 1, thus it = line 1!

Might be easier to explain if I just show you a code example.

$("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());
    };
});​

however, this may still require some wired math as some col sizes may still say "line 2" when the cursor is simply at the END of line one (which technically would still be right since any character would drop to line 2)

jsFiddle

这篇关于测试光标是否在文本区域的第一行(带有软换行符)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！