jqueryで文字数​​を制限する方法

インターネットの急速な発展に伴い、文字数や単語数に制限を設ける Web サイトやアプリケーションが増えています。たとえば、電子商取引プラットフォームではユーザー名の長さを制限する必要があり、Weibo プラットフォームでは Weibo 投稿の文字数を制限する必要があり、ニュース Web サイトではコメントの文字数を制限する必要があります。このニーズに応えて、JQuery は入力ボックスまたはテキスト ボックス内の文字数や単語数を制限する簡単なメソッドをいくつか提供しています。この記事では、一般的に使用されるメソッドのいくつかを紹介します。

1. 入力ボックスまたはテキスト ボックス内の文字または単語の数を数える

JQuery の val() 関数を使用して、入力ボックスまたはテキストの値を取得できます。ボックスにチェックを入れてから、 length プロパティを使用して長さを取得し、文字または単語の数をカウントします。例は次のとおりです:

$("#input").on("input",function(){
    var text = $(this).val();
    var num = text.length;
    $("#count").text(num);
});

このコードでは、入力イベントを使用します。ユーザーが入力ボックスに任意の文字を入力すると、イベントがトリガーされます。その後、入力ボックスの値を取得し、次を使用します。 length 属性を使用して文字の量を取得し、最後にページ上の文字数を表示します。

2. 入力ボックスまたはテキスト ボックス内の文字または単語の数を制限する

文字または単語の数をカウントすることに加えて、文字数または単語の数を制限することもできます。入力ボックスまたはテキストボックス内の文字または単語。この機能を実現するには、JQuery の val() 関数を使用して文字列の一部をインターセプトします。例は次のとおりです:

$("#input").on("input",function(){
    var text = $(this).val();
    var limit = 10;//定义限制字符数
    if(text.length > limit){//超过限制字符数
        $(this).val(text.substr(0,limit));//截取固定长度的字符串
    }
});

このコードでは、制限文字数を指定する変数limitを定義し、入力イベントの文字数が制限文字数を超えているかどうかを判定します。それを超える場合は、substr() 関数を使用します。 固定長文字列を切り取って、入力ボックスまたはテキスト ボックス内の文字または単語の数を制限します。

3. 入力できる残りの文字または単語を表示する

ユーザーは、入力できる文字または単語の数を知る必要がある場合があります。JQuery を使用して、入力できる残りの文字数、または単語数。例は次のとおりです。

var limit = 10;
$("#input").on("input",function(){
    var text = $(this).val();
    var count = limit - text.length;
    if(count >= 0){
        $("#message").text("您还可以输入 " + count + " 个字符");
    }else{
        $("#message").text("您已超出限制 " + Math.abs(count) + " 个字符");
    }
});

このコードでは、文字数の制限を指定する変数制限を定義し、入力イベントで入力ボックスまたはテキスト ボックスの値を取得します。他に入力できるものを計算します 文字は何文字ありますか? 計算結果に基づいてプロンプトが表示されます。

文字数や単語数を制限するには、上記 3 つの方法以外にも、HTML5 の maxlength 属性を使用したり、プラグインを使用したりする方法があります。つまり、JQuery には、入力ボックスまたはテキスト ボックス内の文字または単語の数を制限する簡単なメソッドが多数用意されており、実際のニーズに応じて適切なメソッドを選択できます。

以上がjqueryで文字数​​を制限する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。