Ограничение количества строк в textarea

Я ищу javascript, который может ограничить количество строк (по строке я имею в виду текст, законченный пользователем, нажимая клавишу ввода на клавиатуре), пользователь может войти в текстовое поле. Я нашел некоторые решения, но они просто не работают или ведут себя действительно странно. Лучшим решением будет плагин jquery, который может выполнять работу - что-то вроде CharLimit, но он должен иметь возможность ограничить количество строк текста, а не количество символов.

Спасибо заранее.

Ответы

Ответ 1

Это может помочь (возможно, лучше всего использовать jQuery, onDomReady и ненавязчиво добавить событие keydown в текстовое поле), но тестировать в IE7 и FF3:

<html>
  <head><title>Test</title></head>
  <body>
    <script type="text/javascript">
      var keynum, lines = 1;

      function limitLines(obj, e) {
        // IE
        if(window.event) {
          keynum = e.keyCode;
        // Netscape/Firefox/Opera
        } else if(e.which) {
          keynum = e.which;
        }

        if(keynum == 13) {
          if(lines == obj.rows) {
            return false;
          }else{
            lines++;
          }
        }
      }
      </script>
    <textarea rows="4" onkeydown="return limitLines(this, event)"></textarea>
  </body>
</html>

* Редактировать - объяснение: он нажимает клавишу, если нажата клавиша ENTER, и просто не добавляет новую строку, если строки в текстовом поле совпадают с строками текстового поля. Иначе он увеличивает количество строк.

Ответ 2

Как это сделать с помощью jQuery:

Привязать к событию textDown keyDown.

function limitTextareaLine(e) {
    if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) { 
        return false;
    }
}

Ответ 3

Это решение работает:

<script type="text/javascript">
    function limitTextarea(textarea, maxLines, maxChar) {
        var lines = textarea.value.replace(/\r/g, '').split('\n'), lines_removed, char_removed, i;
        if (maxLines && lines.length > maxLines) {
            lines = lines.slice(0, maxLines);
            lines_removed = 1
        }
        if (maxChar) {
            i = lines.length;
            while (i-- > 0) if (lines[i].length > maxChar) {
                lines[i] = lines[i].slice(0, maxChar);
                char_removed = 1
            }
            if (char_removed || lines_removed) {
                textarea.value = lines.join('\n')
            }
        }
    }
</script>

и текстовая область будет

<asp:TextBox ID="myWishTB" runat="server" Height="185px" TextMode="MultiLine" 
             Style="overflow: auto;" Width="95%" 
             onkeyup="limitTextarea(this,10,80)">
</asp:TextBox>

в регулярном HTML:

<textarea id="textareaID" onkeyup="limitTextarea(this,5,100)" cols="20" rows="5">   </textarea>

Ответ 4

Количество видимых/отображаемых строк для данного блока текста будет различаться в зависимости от разных браузеров, используемых шрифтов и т.д. Вы должны установить, по крайней мере, определенный шрифт и размер шрифта, чтобы иметь возможность полу - достоверно рассчитать отображаемые строки.

UPDATE: Я вижу редактирование. Тогда что-то вроде кода кевхаддерсов должно делать хорошо для вас. Вам понадобятся js, который подсчитывает символы и "\ r\n" и проверяет ограничение пользователя. Кроме того, если вы не используете его script, убедитесь, что вы используете его, который включает проверку времени и/или события onKeyDown/onKeyUp в текстовом поле. Возможно, поэтому некоторые скрипты, которые вы тестировали, "ведут себя странно".

Ответ 5

(Готово с jquery). Это не идеально, но заботится об упаковке. Не deppending только конца строки (\n). У jquery scroll event есть проблемы в mozilla и firefox, если свойство css overflow в textarea не является auto, в противном случае удалите соответствующие строки и скройте переполнение. Может помочь изменить размер css: нет и фиксированная высота.

$('#textarea').scroll(function () {
    $(this).css("overflow", "hidden");      /* for the mozilla browser problem */
    $(this).animate({scrollTop: $(this).outerHeight()});
    while ($(this).scrollTop() > 0) {       /* for the copy and paste case */               
        lines=$(this).val().slice(0,-1);
        $(this).val(lines);
    }
    $(this).css("overflow", "auto");        /* For the mozilla browser problem */
});

Ответ 6

Это в основном то же самое, что и Иван, используя jQuery. Я тестировал его для собственного проекта; кажется, работает нормально.

<script type="text/javascript" charset="utf-8">
  $(function() 
  {
    function getLines(id)
    {
      return $('#' + id).val().split("\n").length
    }

  $('#testing').keyup(function() 
  {
    var allowedNumberOfLines = 4;

    if(getLines('testing') > allowedNumberOfLines)
    {
      modifiedText = $(this).val().split("\n").slice(0, allowedNumberOfLines);
      $(this).val(modifiedText.join("\n"));
    }
  });
});
</script>

Ответ 7

Пример jQuery. Это работает как для ввода, так и для вставки.

  //Limit to # of rows in textarea or arbitrary # of rows
  $('#yourtextarea').bind('change keyup', function(event) {
    //Option 1: Limit to # of rows in textarea
    rows = $(this).attr('rows');
    //Optiion 2: Limit to arbitrary # of rows
    rows = 6;

    var value = '';
    var splitval = $(this).val().split("\n");

    for(var a=0;a<rows && typeof splitval[a] != 'undefined';a++) {
      if(a>0) value += "\n";
      value += splitval[a];
    }
    $(this).val(value);
  });

Ответ 8

Я немного расширил его, чтобы обнаружить даже переполнение без ручного разбиения строк. Это для текстового поля фиксированного размера с "переполнением: скрытым".

В настоящее время мое решение уменьшает шрифт, если он не подходит для textarea. И делает его больше, если это возможно.

var keynum, allowedLines = 5, defaultFontSize = 13/*px*/;

$(document).ready(function() {
    $("textarea").keydown(function(e, obj) {
        if(window.event)
            keynum = e.keyCode;
        else if (e.which)
            keynum = e.which;

        if (keynum == 13 && allowedLines <= $(this).val().split("\n").length)
            return false;
    });
    $("textarea").keyup(function(e, obj) {
        // Avoid copy-paste
        if (allowedLines < $(this).val().split("\n").length) {              
            lines = $(this).val().split("\n").slice(0, allowedLines);
            $(this).val( lines.join('\n') );
        }

        // Check overflow
        if ((this.clientHeight < this.scrollHeight)) {
            while ((this.clientHeight < this.scrollHeight)) {
                currFontSize = $(this).css('font-size');
                finalNum = parseFloat(currFontSize, 11);
                stringEnding = currFontSize.slice(-2);
                $(this).css('font-size', (finalNum-1) + stringEnding);
            }
        } else if ($(this).css('fontSize') != defaultFontSize+'px')  {
            while ($(this).css('font-size') != defaultFontSize+'px') {
                // First lets increase the font size
                currFontSize = $(this).css('font-size');
                finalNum = parseFloat(currFontSize, 11);
                stringEnding = currFontSize.slice(-2);
                $(this).css('font-size', (finalNum+1) + stringEnding);
                // lets loop until its enough or it gets overflow again
                if(this.clientHeight < this.scrollHeight) {
                    // there was an overflow and we have to recover the value
                    $(this).css('font-size', currFontSize);
                    break;
                }
            }
        }
    });
});