1

javascript 関数を使用して、テキストフィールドの長さを超えないようにしますが、その中で貼り付けと編集を許可します。IE8 と Firefox で動作する必要があります。 

$(function() {
    var helper = document.createElement('textarea');
    //if (!('maxLength' in helper)) {
        var supportsInput = 'oninput' in helper,
            ev = supportsInput ? 'input' : 'propertychange paste keyup',
            handler = function() {
                var maxlength = +$(this).attr('maxlength');
                if (this.value.length > maxlength) {
                    this.value = this.value.substring(0, maxlength);
                }
            };

        $('textarea[maxlength]').on(ev, supportsInput ? handler : function() {
            var that = this;
            setTimeout(function() {
                handler.call(that);
            }, 0);
        });
    //}

});

テキストが 1 行にある場合は問題なく動作します (maxLength = 25 でテスト)。ただし、キャリッジ リターンとライン フィードを処理したり、それらを適切に説明したりしません。

たとえば、次のテキストを 1 行に入力するとします。

1111122222333334444455555

25 文字すべてを使用します。

ただし、各行にテキストを入力してEnterキーを押すと、次のように入力できます。

11111
22222
33333
4444

これはわずか22文字です。入力したとき：11111なので、キャリッジリターンを検出していることはわかっています

文字カウンターは5を示しています。enterキーを押すとカウンターは6になり、入力22222するとカウンターは11になります。

文字を数えるために使用しているコードは次のとおりです。

$("#myTextArea").keyup(function() {
        var j = $(this).val().length;
        var i = 25 - j;
        $("#charsUsed").text( j );
        $("#charsLeft").text( i );
        });

問題は TextArea のサイズを自動的に変更するために入れたコードかもしれないと思っていましたが、そうではありません。コードに何かが欠けているだけだと確信しています。私が間違っていることについての意見をいただければ幸いです。まだ理解していないようです。

4

1 に答える 1