ホームページ ウェブフロントエンド フロントエンドQ&A jqueryで文字数​​を制限する方法

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

May 28, 2023 pm 12:07 PM

インターネットの急速な発展に伴い、文字数や単語数に制限を設ける 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 属性を使用して文字の量を取得し、最後にページ上の文字数を表示します。

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

文字または単語の数をカウントすることに加えて、文字数または単語の数を制限することもできます。入力ボックスまたはテキストボックス内の文字または単語。この機能を実現するには、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() 関数を使用します。 固定長文字列を切り取って、入力ボックスまたはテキスト ボックス内の文字または単語の数を制限します。

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

ユーザーは、入力できる文字または単語の数を知る必要がある場合があります。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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

怠zyなロードの概念を説明してください。 怠zyなロードの概念を説明してください。 Mar 13, 2025 pm 07:47 PM

怠zyなロードの概念を説明してください。

UseEffectとは何ですか?副作用を実行するためにどのように使用しますか? UseEffectとは何ですか?副作用を実行するためにどのように使用しますか? Mar 19, 2025 pm 03:58 PM

UseEffectとは何ですか?副作用を実行するためにどのように使用しますか?

React和解アルゴリズムはどのように機能しますか? React和解アルゴリズムはどのように機能しますか? Mar 18, 2025 pm 01:58 PM

React和解アルゴリズムはどのように機能しますか?

各ライフサイクル方法の目的とそのユースケースを説明します。 各ライフサイクル方法の目的とそのユースケースを説明します。 Mar 19, 2025 pm 01:46 PM

各ライフサイクル方法の目的とそのユースケースを説明します。

JavaScriptでカリーはどのように機能し、その利点は何ですか? JavaScriptでカリーはどのように機能し、その利点は何ですか? Mar 18, 2025 pm 01:45 PM

JavaScriptでカリーはどのように機能し、その利点は何ですか?

JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか? JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか? Mar 18, 2025 pm 01:44 PM

JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか?

制御されたコンポーネントと制御されていないコンポーネントの利点と短所は何ですか? 制御されたコンポーネントと制御されていないコンポーネントの利点と短所は何ですか? Mar 19, 2025 pm 04:16 PM

制御されたコンポーネントと制御されていないコンポーネントの利点と短所は何ですか?

Reactのパフォーマンス最適化手法(メモ化、コード分割、怠zyな読み込み)とは何ですか? Reactのパフォーマンス最適化手法(メモ化、コード分割、怠zyな読み込み)とは何ですか? Mar 18, 2025 pm 01:57 PM

Reactのパフォーマンス最適化手法(メモ化、コード分割、怠zyな読み込み)とは何ですか?

See all articles