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

چهارشنبه 30 اردیبهشت 1394

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

محدود کردن تعداد حروف وارد شده در کنترل 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>

 

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

احسان حسینی

نویسنده 42 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید