29

最大文字数制限に達した後、ユーザーがtextareaにテキストを入力できないようにしたい。上限に達したときにテキスト領域のスクロールバーが上に移動したときに、このコードでこれを防ぐことができました。

jQuery(document).ready(function($) {
    $('textarea.max').keyup(function() {
        var $textarea = $(this);
        var max = 400;
        if ($textarea.val().length > max) {
            var top = $textarea.scrollTop();
            $textarea.val($textarea.val().substr(0, max));
            $textarea.scrollTop(top);

        }
    });
}); //end if ready(fn)

しかし、最大制限に達した後、ユーザーがテキストエリアに何も入力できないようにすることも必要です。現在、ユーザーがキーを押したままにして最大制限に達した後、文字はテキスト領域に入力していますが、ボタンを離すと元のテキスト（つまり、$ textarea.val（$ textarea.val（））に戻ります。 substr（0、max））;）。しかし、私はこの条件が真になったらそれを望んでいます

if ($textarea.val().length > max) {

ユーザーは何も入力できません。カーソルがテキストエリアから消えるようにしたい。ただし、ユーザーがテキストを削除すると、カーソルを使用してユーザーが入力を再入力することもできます。どうすればいいですか？

4

9 に答える 9

57

このkeyupイベントは、デフォルトの動作（テキスト領域への入力）が発生した後に発生します。

イベントを使用して、keypress印刷できない文字をフィルタリングすることをお勧めします。

デモ： http： //jsfiddle.net/3uhNP/1/（最大長4）

jQuery(document).ready(function($) {
    var max = 400;
    $('textarea.max').keypress(function(e) {
        if (e.which < 0x20) {
            // e.which < 0x20, then it's not a printable character
            // e.which === 0 - Not a character
            return;     // Do nothing
        }
        if (this.value.length == max) {
            e.preventDefault();
        } else if (this.value.length > max) {
            // Maximum exceeded
            this.value = this.value.substring(0, max);
        }
    });
}); //end if ready(fn)
于 2012-05-02T13:10:33.390 に答える
36 
<textarea maxlength="400"> </textarea>

上記のコードを使用して、テキスト領域に挿入される文字数を制限します。テキスト領域自体を無効にする (つまり、後で編集できない) 場合は、javascript/jquery を使用して無効にできます。

于 2012-05-02T13:12:13.017 に答える
4

複雑にしないでおく 

var max = 50;
$("#textarea").keyup(function(e){
$("#count").text("Characters left: " + (max - $(this).val().length));
});

これをhtmlに追加します

<textarea id="textarea" maxlength="50"></textarea>
<div id="count"></div>

例を見る

于 2014-02-19T12:51:49.863 に答える
2

このコードを Javascript ファイルに記述するだけです。ただし、textarea で「maxlength」属性を指定する必要があります。これは、ページのすべてのテキストエリアで機能します。

$('textarea').bind("change keyup input",function() {

        var limitNum=$(this).attr("maxlength");

        if ($(this).val().length > limitNum) {
            $(this).val($(this).val().substring(0, limitNum));
        }

    });
于 2013-06-12T13:05:06.210 に答える
1

に直接与えmaxlengthてtextarea、それ自体を無効にすることができます。ただし、適切なメッセージを表示したいkeyup場合は、デフォルトの動作とtextarea length文字の計算にイベントを使用し、適切なメッセージを表示します。

HTML

<div id="count"></div>
<textarea class="max"  maxlength="250" id="tarea"></textarea>
<div id="msg"></div>

jQuery

$(function(){
    var max = parseInt($("#tarea").attr("maxlength"));
  $("#count").text("Characters left: " + max);
    $("#tarea").keyup(function(e){
        $("#count").text("Characters left: " + (max - $(this).val().length));
    if($(this).val().length==max)
        $("#msg").text("Limit Reached....");
        else
        $("#msg").text("");
    });
});

デモフィドル

于 2016-03-01T14:49:42.153 に答える
0

独自のプラグインを作成する代わりに、このプラグインを使用できます。私はそれがかなりうまく機能することを発見しました。

于 2012-05-02T13:15:05.650 に答える
0

イベントをそのままにして、このライブラリを使用するだけです

例

// applying a click event to one element

Touche(document.querySelector('#myButton')).on('click', handleClick);

// or to multiple at once

Touche(document.querySelectorAll('.myButtons')).on('click', handleClicks);

// or with jQuery

$('.myButtons').on('click', handleClicks);
于 2015-03-24T07:52:24.100 に答える