Javascript 查找html textarea中的行数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3697096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Finding number of lines in an html textarea
提问by Kyle
I'm writing a mobile web application where scrollbars are not displayed on the device's browser. Due to this, I'm trying to dynamically modify the height of the textarea to make it bigger, however I don't know of any way to actually get the line count on an html textarea. Any help would be greatly appreciated!
我正在编写一个移动 Web 应用程序，其中滚动条不显示在设备的浏览器上。因此，我试图动态修改 textarea 的高度以使其更大，但是我不知道有什么方法可以实际获取 html textarea 的行数。任何帮助将不胜感激！
EDIT
编辑
So I realize now that it's not newlines per se, but actual line wrapping. So when one line finishes it wraps the text to the next line. It appears as if it is a new line. Any way to count the number of these? Thanks!
所以我现在意识到它本身不是换行符，而是实际的换行。因此，当一行完成时，它会将文本换行到下一行。它看起来好像是一个新行。有什么方法可以计算这些数量吗？谢谢！
采纳答案by James Black
I haven't tried using the function discussed in this blog, but you may find it useful.
我还没有尝试使用本博客中讨论的功能，但您可能会发现它很有用。
http://kirblog.idetalk.com/2010/03/calculating-cursor-position-in-textarea.html
http://kirblog.idetalk.com/2010/03/calculating-cursor-position-in-textarea.html
Basically, if you create a divand then copy the text into that div, with the same width and font characteristics, you can then get the information you need, such as the number of lines. The number of lines in this example would be easy, in that if you know how many pixels high a single line would be, then just find the width of the test div and you can get a pretty accurate idea as to how many lines are in your textarea.
基本上，如果您创建一个div然后将文本复制到该 div 中，具有相同的宽度和字体特征，您就可以获得所需的信息，例如行数。这个例子中的行数很简单，因为如果你知道一条线有多少像素高，那么只要找到测试 div 的宽度，你就可以得到关于有多少行的非常准确的想法你的textarea。
回答by Delan Azabani
The number of lines in the textarea would be
textarea 中的行数将是
textarea.value.match(/\n/g).length + 1
回答by Chris Laplante
I have created a plugin to handle line counting and wrap detection in a <textarea>.
I hope someone can use it.
我创建了一个插件来处理行计数和<textarea>.
我希望有人可以使用它。
Sample Usage
示例用法
var result = $.countLines("#textarea");
result.actual // The number of lines in the textarea.
result.wraps // The number of lines in the textarea that wrap at least once.
result.wrapped // The total number of times all lines wrap.
result.blank // The number of blank lines.
result.visual // The approximate number of lines that the user actually sees in the textarea
Working Demonstration
工作示范
/*! Textarea Line Count - v1.4.1 - 2012-12-06
* https://bitbucket.org/MostThingsWeb/textarea-line-count
* Copyright (c) 2012 MostThingsWeb (Chris Laplante); Licensed MIT */
(function($) {
$.countLines = function(ta, options) {
var defaults = {
recalculateCharWidth: true,
charsMode: "random",
fontAttrs: ["font-family", "font-size", "text-decoration", "font-style", "font-weight"]
};
options = $.extend({}, defaults, options);
var masterCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
var counter;
if (!ta.jquery) {
ta = $(ta);
}
var value = ta.val();
switch (options.charsMode) {
case "random":
// Build a random collection of characters
options.chars = "";
masterCharacters += ".,?!-+;:'\"";
for (counter = 1; counter <= 12; counter++) {
options.chars += masterCharacters[(Math.floor(Math.random() * masterCharacters.length))];
}
break;
case "alpha":
options.chars = masterCharacters;
break;
case "alpha_extended":
options.chars = masterCharacters + ".,?!-+;:'\"";
break;
case "from_ta":
// Build a random collection of characters from the textarea
if (value.length < 15) {
options.chars = masterCharacters;
} else {
for (counter = 1; counter <= 15; counter++) {
options.chars += value[(Math.floor(Math.random() * value.length))];
}
}
break;
case "custom":
// Already defined in options.chars
break;
}
// Decode chars
if (!$.isArray(options.chars)) {
options.chars = options.chars.split("");
}
// Generate a span after the textarea with a random ID
var id = "";
for (counter = 1; counter <= 10; counter++) {
id += (Math.floor(Math.random() * 10) + 1);
}
ta.after("<span id='s" + id + "'></span>");
var span = $("#s" + id);
// Hide the span
span.hide();
// Apply the font properties of the textarea to the span class
$.each(options.fontAttrs, function(i, v) {
span.css(v, ta.css(v));
});
// Get the number of lines
var lines = value.split("\n");
var linesLen = lines.length;
var averageWidth;
// Check if the textarea has a cached version of the average character width
if (options.recalculateCharWidth || ta.data("average_char") == null) {
// Get a pretty good estimation of the width of a character in the textarea. To get a better average, add more characters and symbols to this list
var chars = options.chars;
var charLen = chars.length;
var totalWidth = 0;
$.each(chars, function(i, v) {
span.text(v);
totalWidth += span.width();
});
// Store average width on textarea
ta.data("average_char", Math.ceil(totalWidth / charLen));
}
averageWidth = ta.data("average_char");
// We are done with the span, so kill it
span.remove();
// Determine missing width (from padding, margins, borders, etc); this is what we will add to each line width
var missingWidth = (ta.outerWidth() - ta.width()) * 2;
// Calculate the number of lines that occupy more than one line
var lineWidth;
var wrappingLines = 0;
var wrappingCount = 0;
var blankLines = 0;
$.each(lines, function(i, v) {
// Calculate width of line
lineWidth = ((v.length + 1) * averageWidth) + missingWidth;
// Check if the line is wrapped
if (lineWidth >= ta.outerWidth()) {
// Calculate number of times the line wraps
var wrapCount = Math.floor(lineWidth / ta.outerWidth());
wrappingCount += wrapCount;
wrappingLines++;
}
if ($.trim(v) === "") {
blankLines++;
}
});
var ret = {};
ret["actual"] = linesLen;
ret["wrapped"] = wrappingLines;
ret["wraps"] = wrappingCount;
ret["visual"] = linesLen + wrappingCount;
ret["blank"] = blankLines;
return ret;
};
}(jQuery));
result = jQuery.countLines("#textarea");
jQuery('#display').html(
'<span>Actual: ' + result.actual + '</span>' +
'<span>Blank: ' + result.blank + '</span>' +
'<span>Visual: ' + result.visual + '</span>' +
'<span>Wrapped: ' + result.wrapped + '</span>' +
'<span>Wraps: ' + result.wraps + '</span>'
);#textarea {
width: 150px;
height: 80px;
}
#display span {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea">text
here
this is a longer line so that it will wrap in the box longer longer longer</textarea>
<div id="display"></div>回答by Kin
This is an efficient and accurate method to count the number of lines in a text area, including wrapped lines.
这是一种计算文本区域中行数（包括换行数）的有效且准确的方法。
/** @type {HTMLTextAreaElement} */
var _buffer;
/**
* Returns the number of lines in a textarea, including wrapped lines.
*
* __NOTE__:
* [textarea] should have an integer line height to avoid rounding errors.
*/
function countLines(textarea) {
if (_buffer == null) {
_buffer = document.createElement('textarea');
_buffer.style.border = 'none';
_buffer.style.height = '0';
_buffer.style.overflow = 'hidden';
_buffer.style.padding = '0';
_buffer.style.position = 'absolute';
_buffer.style.left = '0';
_buffer.style.top = '0';
_buffer.style.zIndex = '-1';
document.body.appendChild(_buffer);
}
var cs = window.getComputedStyle(textarea);
var pl = parseInt(cs.paddingLeft);
var pr = parseInt(cs.paddingRight);
var lh = parseInt(cs.lineHeight);
// [cs.lineHeight] may return 'normal', which means line height = font size.
if (isNaN(lh)) lh = parseInt(cs.fontSize);
// Copy content width.
_buffer.style.width = (textarea.clientWidth - pl - pr) + 'px';
// Copy text properties.
_buffer.style.font = cs.font;
_buffer.style.letterSpacing = cs.letterSpacing;
_buffer.style.whiteSpace = cs.whiteSpace;
_buffer.style.wordBreak = cs.wordBreak;
_buffer.style.wordSpacing = cs.wordSpacing;
_buffer.style.wordWrap = cs.wordWrap;
// Copy value.
_buffer.value = textarea.value;
var result = Math.floor(_buffer.scrollHeight / lh);
if (result == 0) result = 1;
return result;
}
回答by Tgr
Get scrollHeight, subtract top+bottom padding, divide by lineHeight.
获取scrollHeight，减去顶部+底部填充，除以 lineHeight。
回答by Daniel O'Hara
Maybe there is a way to get the "raw" number of "visual" lines. You should read the scrollHeightproperty of the textarea and divide it by the height of a line. Let's try.
也许有一种方法可以获得“视觉”行的“原始”数量。您应该阅读scrollHeighttextarea的属性并将其除以行高。咱们试试吧。
Start with this HTML:
从这个 HTML 开始：
<textarea id="ta" cols="50" rows="10"></textarea>
Then:
然后：
var line_height = Math.floor($("#ta").height() / parseInt($("#ta").attr("rows")));
var dirty_number_of_lines = Math.ceil($("#ta")[0].scrollHeight / line_height);
I am not sure if that really works, just a mad theory.
我不确定这是否真的有效，只是一个疯狂的理论。
回答by tfe
I'm pretty sure there is no reasonable way to count the number of lines as displayed in the browserespecially considering some browsers (Safari) allow the user to resize textareas.
我很确定没有合理的方法来计算浏览器中显示的行数，特别是考虑到某些浏览器 (Safari) 允许用户调整文本区域的大小。
It'd be hacky, but your best bet might be to just estimate based on the total characters divided by average number of characters per line. :-/
这将是hacky，但你最好的选择可能是根据总字符除以每行平均字符数来估计。:-/
回答by HelpNeeder
You can calculate is as so:
你可以这样计算：
var length = $('#textarea').val().split("\n").length;
回答by bobobobo
The number of characters allowed per line is dictated by the "cols" attribute of the textarea.
每行允许的字符数由 textarea 的“cols”属性决定。
<textarea rows="10" cols="80"></textarea>
Assuming 80 characters per line, a good estimate may be:
假设每行 80 个字符，一个好的估计可能是：
var approxNumLines = textareaElement.value.length / textareaElement.cols ;
Doesn't account for word-break and word-wrap.
不考虑断字和自动换行。
