web-dev-qa-db-fra.com

Recherche du nombre de lignes dans une zone de texte html

J'écris une application Web mobile où les barres de défilement ne sont pas affichées sur le navigateur de l'appareil. Pour cette raison, j'essaie de modifier dynamiquement la hauteur de la zone de texte pour la rendre plus grande. Cependant, je ne connais aucun moyen d'obtenir le décompte de lignes sur une zone de texte html. Toute aide serait grandement appréciée!

MODIFIER

Je me rends donc compte maintenant que ce n’est pas une nouvelle ligne, mais un véritable retour à la ligne. Ainsi, lorsqu'une ligne se termine, le texte est renvoyé à la ligne suivante. Il semble que ce soit une nouvelle ligne. Un moyen de compter le nombre de ceux-ci? Merci!

javascripthtmltextareaheightline
20
Kyle

Je n'ai pas essayé d'utiliser la fonction décrite dans ce blog, mais vous la trouverez peut-être utile.

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

Fondamentalement, si vous créez une div puis copiez le texte dans cette div, avec la même largeur et les mêmes caractéristiques de police, vous pouvez alors obtenir les informations dont vous avez besoin, telles que le nombre de lignes. Le nombre de lignes dans cet exemple serait facile, car si vous savez combien de pixels une ligne est haute, il vous suffit de trouver la largeur de la division de test et d'obtenir une idée assez précise du nombre de lignes qu'il contient. votre textarea.

7
James Black

Le nombre de lignes dans la zone de texte serait

textarea.value.match(/\n/g).length + 1
15
Delan Azabani

J'ai créé un plugin pour gérer le comptage de lignes et la détection d'enveloppe dans un <textarea>.
J'espère que quelqu'un pourra l'utiliser.

Code sur BitBucket

Exemple d'utilisation

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

Démonstration de travail

/*! 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
Chris Laplante

Il s'agit d'une méthode efficace et précise pour compter le nombre de lignes dans une zone de texte, y compris les lignes reliées.

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

Démo ici

3
Kin

Get scrollHeight , soustrayez les marges supérieure et inférieure, divisez par lineHeight.

3
Tgr

Peut-être existe-t-il un moyen d'obtenir le nombre "brut" de lignes "visuelles". Vous devriez lire la propriété scrollHeight de la zone de texte et la diviser par la hauteur d'une ligne. Essayons.

Commencez avec ce code HTML:

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

Ensuite:

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

Je ne suis pas sûr que cela fonctionne vraiment, juste une théorie folle.

1
Daniel O'Hara

Je suis à peu près sûr qu'il n'y a pas de moyen raisonnable de compter le nombre de lignes telles qu'elles sont affichées dans le navigateur , d'autant plus que certains navigateurs (Safari) permettent à l'utilisateur de redimensionner le texte.

Ce serait bien, mais le mieux serait peut-être de simplement estimer le nombre total de caractères divisé par le nombre moyen de caractères par ligne. : - /

1
tfe

Vous pouvez calculer comme suit:

var length = $('#textarea').val().split("\n").length;
0
HelpNeeder