4

問題:
テキストボックスの各行の行数と文字数を制限しようとしています。

これまでに得たもの:
これまでのところ、これを使用して行数を制限することができました:

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

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

これにより、行数の制限に達した場合、ユーザーはリターン キー (keyCode 13) を押すことができなくなります。

問題：
今、私は1行の文字数も制限しようとしています。なぜなら、テキストエリアの最後に到達しても（リターンキーで）、文字を保持したり、大量のテキストを書いたりすることができ、別の行にジャンプするからです。行の終わりに達したとき。そうすれば、この制限を「だます」ことができ、その解決策を探しています。

問題を解決しない私の考え： 

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
         }
     }
}

文字数を制限するためにこれを試しました。それは機能しますが、欠陥があります。1 行で最大文字数 ( ANY ) に達すると、どの行にも入力できなくなります。

今入力している行だけをチェックする方法がわかりません。

4

4 に答える 4

5

これが私が思いついたものです。かなりきれいで、私が行うことができるすべてのテストで機能するようです。

JavaScript：

$(function () {
    $('textarea').on('keypress', function (event) {
        var text = $('textarea').val();
        var lines = text.split("\n");
        var currentLine = this.value.substr(0, this.selectionStart).split("\n").length;
        console.log(lines);
        console.log(currentLine);
        console.log(lines[currentLine - 1]);
        if (event.keyCode == 13) {
            if (lines.length >= $(this).attr('rows')) return false;
        } else {
            if (lines[currentLine - 1].length >= $(this).attr('cols')) {
                return false; // prevent characters from appearing
            }
        }
    });
});

HTML：

<textarea rows="10" cols="15"></textarea>

デモ

于 2012-07-20T20:49:02.090 に答える
5

クロムでテスト済み: 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('\n');
        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;
                }
                //\n count for 1 char;
                charCount += 1;
            });

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

});​

編集

jbabey が指摘したように、ctrl+v または右クリック -> 貼り付けが問題になる可能性があります。右クリックは簡単に防ぐことができます。ctrl + vの場合、おそらくそれも検出できます... JavaScriptを無効にするだけでも、明らかに問題が発生します。とにかく、クライアント側の検証と同様に、サーバー側で再確認する必要があります。

于 2012-07-20T20:05:23.517 に答える
2

各行をループする代わりに、カーソルの現在の行番号を取得し、その行の文字長のみを確認します。実装の詳細については、このSO の回答を参照してください。

次に、else ステートメントを次のように変更します。

else{
    var currLine = getLineNumber();
    if (lines[currLine].length >= $(this.attr('cols')) {
        return false; // prevent characters from appearing
    }
}
于 2012-07-20T19:53:51.403 に答える