JavaScriptを使用してHTMLのtextAreaにmaxlengthを課す方法

116

私が書いた場合に使用できるいくつかの機能が欲しい

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

これは自動的にtextAreaにmaxlengthを課します。可能であれば、jQueryでソリューションを提供しないでください。

注：これは、次のような場合に実行できます。

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

function imposeMaxLength(Event, Object, MaxLen)
{
    return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}

コピーしたHTMLのtextarea上のHTMLの入力「MAXLENGTH」属性をエミュレートするための最良の方法は何ですか？

しかし重要なのは、textAreaを宣言するたびにonKeyPressとonKeyUpを記述したくないということです。

javascript  html  textarea 
— ラケシュジュヤル
ソース
4
textareasのmaxlenthはhtml5にあります。現在、Chromeでは機能しますが、Firefoxでは機能しません。
— デイブ

回答:

113 
window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA'); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}
— ジョシュ・ストドラ
ソース
3
Joshそれはうまくいくようですが、これが何をするか説明します--- if（/ ^ [0-9] + $ /。test（txts [i] .getAttribute（ "maxlength"）））{- -
— ラケッシュJuyal
2
私は契約が何であるか覚えています：FFまたはIE（それはFFだと思います）は、Javascriptが「値」属性をチェックするときに、フォームが投稿されたときにサーバーに送り返すものとは異なる文字列を返します。これは、ハード改行がキャリッジリターン文字を挿入する/しない方法と関係があります。クライアント側とサーバー側のデバッグコードを使用して簡単に理解できます。
— 先のとがっ
7
アラートの順序と値の切り捨てを切り替えました-元の順序では、onkeyupがアラートを出し、フィールドがまだ切り捨てられていないため、コントロールがフォーカスを失い、onblurが起動します。
— GalacticCowboy
1
@JoshStodola- onblurユーザーがテキスト領域をクリックするまで貼り付けを処理しません。onkeyupコンテキストメニューまたはブラウザメニューから行われた場合、貼り付けは処理されません。この方法は、貼り付けをスクリーニングする必要がない場合に機能します。タイマーベースのアプローチについては、この回答を参照してください。stackoverflow.com
— Travis J
3
@JoshStodola-確かにできません。textareaに何かの全体を貼り付けて[送信]をクリックし、その一部のみが応答せずに通過するのを見ると、ユーザーとして本当に私を困らせます。
— Travis J
80

あなたはjQueryを避けたいと思っていますが、このソリューションにはJavaScriptが必要なので、このソリューション（jQuery 1.4を使用）は最も簡潔で堅牢です。

に触発されましたが、ダナ・ウッドマンの答えよりも改善されました：

その答えからの変更点は、jQuery.liveを使用し、長さがOKの場合はvalを設定しない、簡素化されたより一般的なものです（IEで矢印キーが機能し、IEで顕著なスピードアップが得られます）。

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

編集：の代わりに使用して、jQuery 1.7+の更新バージョンonlive

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});
— エイリックW
ソース
1
素敵なEirik、ライブの使用のようです（忘れてしまいました！）。
— Dana Woodman、2011
5
live（）とjQueryのバグを発見して以来、非推奨になっています。代わりにon（）を使用してください。：あなたは、なぜ気にしている場合britishdeveloper.co.uk/2012/04/...
— BritishDeveloper
6
しかし、彼らが途中で編集した場合、これは新しいキャラクターではなく最後のキャラクターを殺しますよね？
— Joe Mabel
6
うん、on（）を使用し、gemのように機能します。ありがとう。ここに変更と微調整を加えたフィドルがあります：jsfiddle.net/nXMqc
— B-Money
6
スライスの問題は、途中で文字を入力すると、文字が挿入され、文字列が最後から切り取られることです。テキスト全体が一度に表示されない場合、これは混乱を招く可能性があります。また、val（..）関数を使用して値を変更すると、カーソルが文字列の末尾に移動するように見えます。（これらを最新のブラウザでフィドルでテストする場合は、maxlength属性を削除する必要があります-そうでない場合、ブラウザが制限を強制します）
— JuhaPalomäki2013年
33

更新.live()代わりにを使用してEirikのソリューションを使用します。

jQueryを使用していないソリューションが必要だったとしても、Google経由でこのページを見つけてjQuery-esqueソリューションを探している人のために追加したいと思いました。

$(function() {        
    // Get all textareas that have a "maxlength" property.
    $('textarea[maxlength]').each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field.
        var maxlength = $textarea.attr('maxlength');
        var val = $textarea.val();

        // Trim the field if it has content over the maxlength.
        $textarea.val(val.slice(0, maxlength));

        // Bind the trimming behavior to the "keyup" event.
        $textarea.bind('keyup', function() {
            $textarea.val($textarea.val().slice(0, maxlength));
        });

    });
});

Google社員の皆さんに役立つことを願っています...

— ダナ・ウッドマン
ソース
1
キーアップバインド関数は次のようになります。$（this）.val（$（this）.val（）。slice（0、maxlength））;
— ブライアンヴァレルンガ
@ブライアンうん、あなたは正しいです。エラーを見つけてくれてありがとう、修正しました！
— ダナ・ウッドマン
$（this）.val（function（i、val）{return val.slice（0、maxlength）}）;
— ディマビルディン
改行はブラウザでは1文字、サーバーでは2文字としてカウントされるため、このスニペットは依然として役に立ちます
— bebbo
32

HTML5は、次のように要素にmaxlength属性を追加しますtextarea。

<!DOCTYPE html>
<html>
    <body>
        <form action="processForm.php" action="post">
            <label for="story">Tell me your story:</label><br>
            <textarea id="story" maxlength="100"></textarea>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

現在、これはChrome 13、FF 5、Safari 5でサポートされています。当然のことながら、これはIE 9ではサポートされていません（Win 7でテスト済み）。

— james.garriss
ソース
5

このソリューションは、テキストの中央に文字が追加されたときに最後の文字が削除されるというIEの問題を回避します。他のブラウザでも正常に動作します。

$("textarea[maxlength]").keydown( function(e) {
    var key = e.which;  // backspace = 8, delete = 46, arrows = 37,38,39,40

    if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;

    return $(this).val().length < $(this).attr( "maxlength" );
});

次に、私のフォーム検証は、ユーザーがtextareaの最大長を超えるテキストを貼り付けた（IEでのみ問題と思われる）問題に対処します。

— クリスR
ソース
4

これは、私のサイトで使用したばかりの微調整されたコードです。 残りの文字数をユーザーに表示するように改善されました。

（jQueryを要求しなかったOPにもう一度申し訳ありません。しかし真剣に、最近jQueryを使用していないのは誰ですか？）

$(function() {
    // Get all textareas that have a "maxlength" property.
    $("textarea[maxlength]").each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field
        var maxlength = $textarea.attr("maxlength");

        // Add a DIV to display remaining characters to user
        $textarea.after($("<div>").addClass("charsRemaining"));

        // Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
        $textarea.on("keyup blur", function(event) {
            // Fix OS-specific line-returns to do an accurate count
            var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength);
            $textarea.val(val);
            // Display updated count to user
            $textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
        }).trigger("blur");

    });
});

国際的なマルチバイト文字でテストされていないため、それらがどのように機能するかはわかりません。

— サイモン・イースト
ソース
2

また、textareaへの貼り付けを処理する次のイベントを追加します。

...

txts[i].onkeyup = function() {
  ...
}

txts[i].paste = function() {
  var len = parseInt(this.getAttribute("maxlength"), 10);

  if (this.value.length + window.clipboardData.getData("Text").length > len) {
    alert('Maximum length exceeded: ' + len);
    this.value = this.value.substr(0, len);
    return false;
  }
}

...
— Stusherwin
ソース
だいじょうぶだと思ったら、誰かが回答の本文にこれを追加できますか？それを行うにはまだ十分なポイントがありません。
— stusherwin
貼り付け機能は標準化されていません。IEでのみ機能すると思います。
— Josh Stodola
貼り付け状況に対処するために回答を更新しました。ありがとうございました！
— Josh Stodola、
2

maxlength属性は、Internet Explorer 10、Firefox、Chrome、およびSafariでサポートされています。

注：<textarea>タグのmaxlength属性は、Internet Explorer 9以前のバージョン、またはOperaではサポートされていません。

HTMLのMAXLENGTH属性w3schools.com

IE8以前のバージョンでは、以下を使用する必要があります

//only call this function in IE
function maxLengthLimit($textarea){
    var maxlength = parseInt($textarea.attr("maxlength"));
    //in IE7,maxlength attribute can't be got,I don't know why...
    if($.browser.version=="7.0"){
        maxlength = parseInt($textarea.attr("length"));
    }
    $textarea.bind("keyup blur",function(){
        if(this.value.length>maxlength){
            this.value=this.value.substr(0,maxlength);
        }
    });
}

PS

<input>タグのmaxlength属性は、すべての主要なブラウザーでサポートされています。

HTMLのMAXLENGTH属性w3schools.com

— イーソン
ソース
1

textareaの値をトリミングするよりも優れたソリューション。

$('textarea[maxlength]').live('keypress', function(e) {
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    if (val.length > maxlength) {
        return false;
    }
});
— バーラト
ソース
1

jQueryを使用して簡単かつ明確にすることができます

JSFiddle デモ

<textarea id="ta" max="10"></textarea>

<script>
$("#ta").keypress(function(e){

    var k = e.which==0 ? e.keyCode : e.which;
    //alert(k);
    if(k==8 || k==37 || k==39 || k==46) return true;

    var text      = $(this).val();
    var maxlength = $(this).attr("max");

    if(text.length >= maxlength) {
        return false;   
    }
    return true;
});
</script>

それはでテストされFirefox、Google ChromeそしてOpera

— MaxEcho
ソース
ハンドラーが実行されると、text更新される前のtexareaの「値」で満たされるのではないかと心配です。これは、テストがであることを意味しますif( text.length +1 > maxlength) {return false;}。そうしないと、maxlength - 1文字を入れることしかできません:/
— Stphane
フィドルでは、ユーザーがもう1文字入力できます。IMO、あなたのテストのいずれかでなければなりませんif(text.length+1 > maxlength)かif(text.length >= maxlength)...
— Stphane
コンテンツをコピーして貼り付けたときに期待どおりに機能しない
— Ranjit Kumar
0

上記のコードの小さな問題は、val（）がchange（）イベントをトリガーしないことです。そのため、backbone.js（またはモデルバインディング用の別のフレームワーク）を使用している場合、モデルは更新されません。

私は解決策を投稿しています。

$(function () {

    $(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) {
        var maxLength = $(this).attr('maxlength');
        if (e.keyCode > 47 && $(this).val().length >= maxLength) {
            $(this).val($(this).val().substring(0, maxLength)).trigger('change');
        }
        return true;
    });

});
— アレクサンダーベレツキー
ソース
0

私maxlengthはtextarea最近動作を実装し、この質問で説明されている問題に遭遇しました：Chromeはmaxlength属性を持つtextareaで間違った文字をカウントします。

したがって、ここにリストされているすべての実装は、バグがほとんどありません。この問題を解決するために、.replace(/(\r\n|\n|\r)/g, "11")以前に追加しました.length。そして、文字列をカットするときにそれを心に留めておいてください。

私はこのようなもので終わりました：

var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length;
if (realLength > maxlength) {
    el.val(val.slice(0, maxlength - (realLength - length)));
}

それが問題を完全に解決するかどうかはわかりませんが、今のところ私にとってはうまくいきます。

— ローマポミノフ
ソース
0

IE9、FF、Chromeで動作し、ユーザーにカウントダウンを提供するこのjQueryを試してください。

$("#comments").bind("keyup keydown", function() {
    var max = 500;
    var value = $(this).val();
    var left = max - value.length;
    if(left < 0) {
        $(this).val( value.slice(0, left) );
        left = 0;
    }
    $("#charcount").text(left);
}); 

<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>
— レスリー・キング
ソース
0

次のコード例を使用してみてください：

$("#TextAreaID1").bind('input propertychange', function () {
    var maxLength = 4000;
    if ($(this).val().length > maxLength) {
        $(this).val($(this).val().substring(0, maxLength));
    }
});
— ナヴィーン
ソース
-1

これははるかに簡単です：

<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>
スニペットを展開

— Erdomester
ソース
2
maxlength必要な長さよりも長い文字列を貼り付けることができるため、このソリューションは完全には複製されないことに注意してください。
— Chris Bier、2015
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.