محدود کردن تعداد حروف وارد شده در کنترل TextArea توسط JavaScript و JQuery

اگر بخواهیم به کاربر , تعداد حروف وارد شده در یک کنترل مانند TextBox یا TextArea را نمایش دهیم و کاربر را محدود به وارد کردن تعدادی معین از حروف کنیم , میتوانیم این عمل را با استفاده از توابع JavaScript و یا JQuery انجام دهیم .

یکی از کارایی های شمارش تعداد حروف , استفاده از آن در پنل های ارسال اس ام اس میباشد , که می توانیم تعداد حروفی را که می خواهیم به افراد ارسال نمایم را مدیریت کنیم .

در این مقاله قصد داریم یک کنترل TextArea در صفحه قرار دهیم و تعداد حروف وارد شده توسط کاربر را محدود کنیم .همچنین یک شمارنده معکوس در صفحه قرار می دهیم که کاربر بتواند تعداد حروفی که وارد می کند را مشاهده کند .

بکارگیری تابع MaxLength در JQuery :

در ادامه تابع MaxLength که در اسکریپت مربوط به jQuery نوشته ایم را می توانید مشاهده کنید :

 <script type="text/javascript">
    $(function () {
        //Normal Configuration
        $("#TextBox1").MaxLength({ MaxLength: 10 });
 
        //Specifying the Character Count control explicitly
        $("#TextBox2").MaxLength(
        {
            MaxLength: 15,
            CharacterCountControl: $('#counter')
        });
 
        //Disable Character Count
        $("#TextBox3").MaxLength(
        {
            MaxLength: 20,
            DisplayCharacterCount: false
        });
    });
</script>

تابع MaxLength که یک مقدار با نوع عدد دریافت می کند , حد اکثر تعداد حروف را تعیین میکند .

$("#TextBox1").MaxLength({ MaxLength: 10 });

که در این مثال حد اکثر تعداد حروف ورودی را 10 حرف تعیین کرده ایم

تابع CharacterCountControl که به صورت پیش فرض تعداد حروف باقی مانده را از کنترل Textbox و یا TextArea نمایش می دهد , اما کاربر می تواند این تابع را برای کنترلی دیگر فراخوانی کند ,

 $("#TextBox2").MaxLength(
                {
                    MaxLength: 15,
                    CharacterCountControl: $('#counter')
                });

تابع DisplayCharacterCount : که به صورت پیش فرض در حالت True میباشد , که اگر به وضعیت False تغییر کند , شمارش حروف غیر فعال میشود .

$("#TextBox3").MaxLength(
        {
            MaxLength: 20,
            DisplayCharacterCount: false
        });

در دستور بالا تعداد حروف مشخص شده را به کاربر نمایش می دهد که در این مثال 20 حرف میباشد .

در ادامه می توانید کلیه دستورات به همراه تگ های موجود در صفحه را مشاهده نمایید :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>شمارنده تعداد حروف</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
    <body dir="rtl">
        <h3>
            <a href="http://barnamenevisan.org/">برنامه نویسان</a>
        </h3>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="MaxLength.min.js"></script>
        <script type="text/javascript">
            $(function () {
                //Normal Configuration
                $("#TextBox1").MaxLength({ MaxLength: 10 });

                //Specifying the Character Count control explicitly
                $("#TextBox2").MaxLength(
                {
                    MaxLength: 15,
                    CharacterCountControl: $('#counter')
                });

                //Disable Character Count
                $("#TextBox3").MaxLength(
                {
                    MaxLength: 20,
                    DisplayCharacterCount: false
                });
            });
        </script>
        
        <div id="counter">
        </div>
        <textarea id="TextBox2" style="height: 100px; width: 300px"></textarea>
        <br />
        <br />
        <textarea id="TextBox3" style="height: 100px; width: 300px"></textarea>
    </body>
</html>

فایل های ضمیمه

Example_MaxLengthofTextArea.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

محدود کردن تعداد حروف وارد شده در کنترل TextArea توسط JavaScript و JQuery

فایل های ضمیمه

احسان حسینی

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید