Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
370 views
in Technique[技术] by (71.8m points)

javascript - Limiting number of lines and letters in single line in textarea

Problem:
I am trying to limit number of lines AND letters in each line in a textbox.

What i got so far:
So far i managed to limit lines count using this:

var text = $(this).val();
var lines = text.split("
");

if(e.keyCode == 13 && lines.length >= $(this).attr('rows')) { 
        return false;
    }

This won't allow user to push return key (keyCode 13) if the limit of lines is reached.

The problem:
Now i am trying to limit number of letters in a single line too, because if i reach end of my textarea (with return key) i still can hold a letter/write tons of text, and it will jump to another line when it reaches end of line. That way this limitation can be "cheated" and i am looking for a solution for that.

My ideas, not solving the problem:

else{
    for(var i = 0; i < lines.length && e.keyCode != 13; i++) {
         if(lines[i].length >= $(this).attr('cols')) {
             return false; // prevent characters from appearing
         }
     }
}

I tried this to limit number of letters. That works, but it got flaws. If i reach max letters in one line (ANY), i CANT TYPE IN ANY LINE anymore.

I have no idea how to check only line i am typing in RIGHT NOW.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Tested in chrome : http://jsfiddle.net/3e3EH/1/

$(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('
');
        if (e.keyCode == 13){
            return lines.length < maxRows;
        }
        else{
            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;
                }
                //
 count for 1 char;
                charCount += 1;
            });

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

});?

Edit

As jbabey pointed out, ctrl+v or right-click -> paste can be an issue. right click can easily be prevented. for ctrl+v, you probable can detect it too... Just disabling javascript will obviously break the thing, too. Anyways, as any client-side validation, you have to double check on server-side.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...