CODEWITHSUNDEEP
javascripthtml
Alen Subasic
Alen Subasic

Reputation: 45

multiple <textarea> fields with character counter+row limiter

This is what I currently have to count down the available characters to the user. It can work on multiple textareas I just have to change the id.

function checkTextArea(id,limit){
  if (document.getElementById(id)){
    var txt = document.getElementById(id).value;
    if (txt.length>limit){
      document.getElementById(id).value = txt.substr(0,limit);
    }
    len = document.getElementById(id).value.length;
    if (document.getElementById('count'+id)){
      document.getElementById('count'+id).innerHTML = (limit-len)+" characters remaining.";
    }
  }
}

This is the JS that limits the amount of rows available in the textarea.

$(document).ready(function(){
    var textArea = $('#foo');
    var maxRows = textArea.attr('rows');
    var maxChars = textArea.attr('cols');
    textArea.keypress(function(e){
        var text = textArea.val();
        var lines = text.split('\n');
        if (e.keyCode == 13){
            return lines.length < maxRows;
        }
        else{ //Should check for backspace/del/etc.
            var caret = textArea.get(0).selectionStart;
            console.log(caret);

            var line = 0;
            var charCount = 0;
            $.each(lines, function(i,e){
                charCount += e.length;
                if (caret <= charCount){
                    line = i;
                    return false;
                }
                //\n count for 1 char;
                charCount += 1;
            });

            var theLine = lines[line];
            return theLine.length < maxChars;
        }
    });

});

I need to combine these so that I can use the row limit and character count on multiple textareas.

Upvotes: 0

Views: 905

Answers (1)

MickLH
MickLH

Reputation: 416

http://jsfiddle.net/YevSV/ I'll leave it as an excercise for you to make it pretty around the edges

EDIT: just in case someone comes by later, here's limit as a parameter and accounting for the fact that jQuery calls the callback before the character is added (purely cosmetic the comparison was already >= )

$(document).ready(function(){
    applyLimiter("foo",420);
});
function applyLimiter(id,limit) {
    if (document.getElementById('count'+id)){
        document.getElementById('count'+id).innerHTML = limit+" characters remaining.";
    }
    var textArea = $('#'+id);
    var maxRows = textArea.attr('rows');
    var maxChars = textArea.attr('cols');
    textArea.keypress(function(e){
        var text = textArea.val();
        var len=text.length;
        if (document.getElementById('count'+id)){
            document.getElementById('count'+id).innerHTML = (limit-(len+1))+" characters remaining.";
        }
        if (len>=limit) return false;
        var lines = text.split('\n');
        if (e.keyCode == 13){
            return lines.length < maxRows;
        }
        else{ //Should check for backspace/del/etc.
            var caret = textArea.get(0).selectionStart;
            console.log(caret);

            var line = 0;
            var charCount = 0;
            $.each(lines, function(i,e){
                charCount += e.length;
                if (caret <= charCount){
                    line = i;
                    return false;
                }
                //\n count for 1 char;
                charCount += 1;
            });

            var theLine = lines[line];
            return theLine.length < maxChars;
        }
    });
}

Upvotes: 1

Related Questions