Textarea

Question

我想获取文本区域中的每一行。 textarea 很小，根据宽度限制包装单词。所以我尝试了：

// Sample text: I want to find(line wrapped) all lines here

$("#textarea1").val().split(/(\r\n|\n|\r)/gm).length
// 1, not the right length, should be 2

$("#textarea1").val().split(/\r?\n/g).length
// 1

$("#textarea1").val().split("\n").length
// 1

$("#textarea1").val().split("\r").length
// 1

我也单独和一起尝试了wrap="hard"和white-space: pre-wrap。

好像没找到换行符！！需要帮助，谢谢。

Answer 1

我想就像你说的那样：文本区域根据宽度限制换行——这意味着你找不到换行符。您要查找的换行符是字符，而这些字符尚未插入到您的文本中。

Answer 2

所以我的做法是：

克隆 textarea in question - $("#text") 到一个透明的文本区域。使用透明字体。
将克隆的 id 值更改为 $("#newtext") 并将其附加到 DOM。
在每个 keyup 上，我们在 this character's keyup 之前取 $("#text") 的值。将该值放入 $("#newtext") 并检查是否 $("#newtext").get(0).scrollHeight() > $("#newtext").height()。如果 true => this 字符导致换行。
循环增加 $("#newtext") 行，直到
$("#newtext").get(0).scrollHeight() === $("#newtext").height()
取this字符前的文字，加一个\n，加this字符到$("#newtext").val()
将$("#newtext").val()应用到$("#text").val()。
从 DOM 中删除 $("#newtext")。
对每个按键事件重复上述所有步骤

以上答案与 - whosebug.com/questions/3738490/finding-line-wraps – evolutionxbox yesterday

类似

所以，基本上我们将换行符转换为可以使用 $("#text").val().split("\n") 找到的换行符。

（注意 - 如果我们不将透明文本区域附加到 DOM，它的 scrollHeight() 将是 undefined）

Textarea - 获取每一行，找到换行符

Textarea - get each line, find line breaks

html

javascript

css

jquery