Я пишу мобильное веб-приложение, в котором полосы прокрутки не отображаются в браузере устройства. В связи с этим я пытаюсь динамически изменить высоту текстовой области, чтобы сделать ее больше, однако я не знаю, как на самом деле получить счетчик строк для текстовой области HTML. Любая помощь будет принята с благодарностью!

РЕДАКТИРОВАТЬ

Теперь я понимаю, что это не переводы строк как таковые, а перенос строк. Поэтому, когда одна строка заканчивается, текст переносится на следующую строку. Похоже, что это новая строка. Есть ли способ подсчитать количество таких? Спасибо!

24
Kyle 13 Сен 2010 в 03:28

9 ответов

Лучший ответ

Я не пробовал использовать функцию, описанную в этом блоге, но вы можете найти ее полезной.

http://kirblog.idetalk.com/2010/03/calculating-cursor-position-in-textarea.html

По сути, если вы создаете div, а затем копируете текст в этот div с такими же характеристиками ширины и шрифта, вы можете получить необходимую информацию, например количество строк. Количество строк в этом примере будет простым: если вы знаете, сколько пикселей будет в одной строке, то просто найдите ширину тестового элемента div, и вы сможете получить довольно точное представление о количестве строк в ваш textarea.

7
James Black 13 Сен 2010 в 00:10

Количество символов в строке определяется атрибутом «cols» текстовой области.

<textarea rows="10" cols="80"></textarea>

Если предположить, что в строке 80 символов, хорошей оценкой может быть:

var approxNumLines = textareaElement.value.length / textareaElement.cols ;

Не учитывает разрыв слов и перенос слов.

-1
bobobobo 12 Сен 2010 в 23:45

Рассчитать можно так:

var length = $('#textarea').val().split("\n").length;
0
HelpNeeder 11 Фев 2015 в 01:32

Возможно, есть способ получить «сырое» количество «визуальных» строк. Вы должны прочитать свойство scrollHeight текстовой области и разделить его на высоту строки. Давай попробуем.

Начните с этого HTML:

<textarea id="ta" cols="50" rows="10"></textarea>

Затем:

var line_height = Math.floor($("#ta").height() / parseInt($("#ta").attr("rows")));
var dirty_number_of_lines = Math.ceil($("#ta")[0].scrollHeight / line_height);

Я не уверен, что это действительно работает, просто безумная теория.

1
Daniel O'Hara 13 Сен 2010 в 00:23

Я уверен, что нет разумного способа подсчитать количество строк , отображаемых в браузере , особенно учитывая, что некоторые браузеры (Safari) позволяют пользователю изменять размер текстовых полей.

Это было бы смешно, но лучше всего было бы просто оценить, основываясь на общем количестве символов, поделенном на среднее количество символов в строке. : - /

1
tfe 12 Сен 2010 в 23:43

Получите scrollHeight, вычтите верхний + нижний отступ, разделите на lineHeight.

3
Tgr 13 Сен 2010 в 00:24

Это эффективный и точный метод подсчета количества строк в текстовой области, включая обернутые строки.

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

Демо здесь

6
Kin 22 Июл 2017 в 07:55

Я создал плагин для обработки подсчета строк и определения переноса в <textarea>.
Я надеюсь, что кто-то может использовать это.

Код на BitBucket

Пример использования

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  

Рабочая Демонстрация

/*! 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>
10
showdev 16 Сен 2015 в 00:14

Количество строк в текстовой области будет

textarea.value.match(/\n/g).length + 1
16
Delan Azabani 12 Сен 2010 в 23:31