web-dev-qa-db-ja.com

jQueryを使用してtextareaの行数を制限し、行数を表示する

JQueryを使用して：

  • ユーザーがテキストエリアに入力できる行数を設定された数に制限する
  • 行が入力されると行数を更新する行カウンターを表示します
  • Returnキーまたは/ nは行としてカウントされます

助けてくれる人に感謝します！

$(document).ready(function(){
  $('#countMe').keydown(function(event) {
    // If number of lines is > X (specified by me) return false
    // Count number of lines/update as user enters them turn red if over limit.

  });   
});


<form class="lineCount">
  <textarea id="countMe" cols="30" rows="5"></textarea><br>
  <input type="submit" value="Test Me">
</form>

<div class="theCount">Lines used = X (updates as lines entered)<div>

この例では、許可されている行数を10に制限します。

皆さんありがとう！

javascriptjqueryhtmlvalidationtextarea
26
chainwork

html：

<textarea id="countMe" cols="30" rows="5"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span><div>

js：

$(document).ready(function(){

    var lines = 10;
    var linesUsed = $('#linesUsed');

    $('#countMe').keydown(function(e) {

        newLines = $(this).val().split("\n").length;
        linesUsed.text(newLines);

        if(e.keyCode == 13 && newLines >= lines) {
            linesUsed.css('color', 'red');
            return false;
        }
        else {
            linesUsed.css('color', '');
        }
    });
});

フィドル： http://jsfiddle.net/XNCkH/17/

45
Samuel Liew

これは、少し改善されたコードです。前の例では、必要な行を含むテキストを貼り付けることができました。

HTML

<textarea data-max="10"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span><div>

JS

jQuery('document').on('keyup change', 'textarea', function(e){

        var maxLines = jQuery(this).attr('data-max');        
        newLines = $(this).val().split("\n").length;

        console.log($(this).val().split("\n"));

        if(newLines >= maxLines) {
            lines = $(this).val().split("\n").slice(0, maxLines);
            var newValue = lines.join("\n");
            $(this).val(newValue);
            $("#linesUsed").html(newLines);
            return false;
        }

    });
1
Antonio Novak

非常にいですが、どういうわけか実用的な例はtextareaの行を指定します

<textarea rows="3"></textarea>

そして、jsで

   $("textarea").on('keydown keypress keyup',function(e){
       if(e.keyCode == 8 || e.keyCode == 46){
           return true;
       }
       var maxRowCount = $(this).attr("rows") || 2;
        var lineCount = $(this).val().split('\n').length;
        if(e.keyCode == 13){
            if(lineCount == maxRowCount){
                return false;
            }
        }
        var jsElement = $(this)[0];
        if(jsElement.clientHeight < jsElement.scrollHeight){
            var text = $(this).val();
            text= text.slice(0, -1);
            $(this).val(text);
            return false;
        }

    });
0
Alexandr Sargsyan