Question

我需要一些函数来计算行数（我知道在stackoverflow上有超过数百个这样的问题）但在我的情况下我需要计算它们即使没有行结束（意味着“/ n”）因为典型的功能是

textarea.value.substr(0, textarea.selectionStart).split("\n").length;.

这意味着如果用户溢出行的最大长度但他没有使用“输入”并且文本在“新行”上。好吧，我不知道如何更好地描述它，所以在fiddle https://jsfiddle.net/fNPvf/12872/上有一个例子尝试写没有空格的长句，输入等等。你会看到问题出在哪里

我真正不想要的是css rule nowrap，overflow-x等。

Answer 1

你走了。

/** @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;
}

Demo here

Answer 2

如果我正确理解问题，你需要计算两件事。

强硬换行的次数＆＃34; \ n＆＃34;。
包裹X个字符的行数。

这里有一些伪代码：

var lineLengthLimit = 40;
var lineCounter = 0;

foreach(lines as line){
    lineCounter+=Math.floor(line.length/lineLengthLimit);
}

lineCounter += lines.length;

另一个选择可能就是这个人建议：https://stackoverflow.com/a/3697249/1207539但似乎有点粗略。

textarea - 如何计算包裹的行/行

2 个答案: