给定一个内容像这样流动的文本区域
–––––––––––––––––––––––––– | 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)。
最佳答案
我只知道一种“工作方法”。该方法需要使用 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
关于javascript - 测试光标是否在文本区域的第一行(使用软换行符),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11851266/