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

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

احسان حسینی

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