با سلام و خسته نباشید خدمت شما

حتما اگر دارید یک فرم طراحی می کنید که فیلدهاش مبلغ هست به این مشکل برخوردین که چجوری اعداد داخل فیلد رو برای راحتی کاربر سه رقم سه رقم جدا کنید

،خوب ما هم برای شما چند نمونه کد گذاشتم که البته خودم نمونه کد دوم رو ترجیح دادم می تونین نمونه استفاده شده از این کد رو همراه کدهای دیگه رو در نرم افزار فروشندگان تایر ببینید ،امیدوارم از کدها خوشتون بیاد.

نمونه اول:

با کمک این کدهای جاوااسکریپت می‌توانید عددها را سه رقم، سه‌رقم با کمک ویرگول از یکدیگر جدا کنید:

function addComma( str ) {

       var objRegex = new RegExp( '(-?[0-9]+)([0-9]{3})' );

       while( objRegex.test( str ) ) {

              str = str.replace( objRegex, '$1,$2' );

       }

       return str;

}

تابع زیر هم می‌تواند برای حذف ویرگول از عددها مورد استفاده قرار بگیرد:

function removeComma( str ) {

       return str.replace( /,/g, '' );

}

شکل قدیمی و بلند‌تر:

function removeComma( str ) {

       var myString = '',

              chrCode;

       for( var i = str.length - 1; i >= 0; --i ) {

              chrCode = str.charCodeAt( i );

              // 44 = comma

              if( chrCode != 44 ) {

                    myString = String.fromCharCode( chrCode ) + myString;

              }

       }

       return myString;

}

 

برای آنکه یک فیلد متنی در هنگام خروج مکان‌نما به صورت خودکار اعداد را جدا کند و در هنگام ورود مکان‌نما عدد را به صورت عادی برگرداند از کدهای موجود در مثال زیر استفاده کنید:

 

<input type="text"

       onblur="this.value = addComma( this.value );"

       onfocus="this.value = removeComma( this.value );" />

 

 

نمونه کد دوم:

 ابتدا فایل زیر را با کلیک راست روی لینک و انتخاب save Target As ذخیره کنید:

http://tutorials.aftab.cc/web/javascript/number_format/NumberFormat.js

 

دوما با قطعه کد زیر، این فایل را به صفحه خود ضمیمه کنید:

<script type="text/javascript" src="js/NumberFormat.js"></script>

(تصور ما این این است که شما این فایل را در پوشه js در کنار فایلی که در حال طراحی هستید، قرار داده‌اید)

سوما در کنار فیلد مربوط به قیمت، یک input از نوع readonly و یا حتی disabled قرار دهید:

قطعه کد فیلد قیمت و قیلدی که قیمت همراه با کاما را نشان می‌دهد به صورت زیر است:

<input type="text" name="price" id="price" onkeyup="javascript:FormatNumber('price','price2');" />
<input type="text" id="price2" disabled="disabled" />

به تابع FormatNumber دقت کنید.

این تابع دو ورودی دارد. اولی فیلدی است که عدد را کاربر در آن وارد می‌کند و دومی فیلدی است که نتیجه عدد همراه با کاما در آن قرار می‌گیرد.

توجه:

– این تابع اعداد اعشاری را نیز به خوبی تشخیص داده و صحیح و همراه با کاما نمایش می‌دهد.

–به idها دقت کنید.

 

نمونه کد سوم:

در php که تابع آماده number_format برای این منظور وجود دارد:

echo number_format(9759382659);

// 9,759,382,659  

                           
البته این تابع تنظیمات جالبی هم دارد که می‌توانید در راهنمای آن مشاهده کنید:
http://php.net/number_format
سه نمونه کاربردش رو ببینید:

$student_average = 453/23;    //    19.69565217391304

echo number_format($student_average, 2);

// 19.70

echo number_format($student_average, 2, '/', ',');

// 18/12

echo number_format(3252346, 0, '.', '،');

// 3،252،346

 

اما در مورد جاوا اسکریپت؛ روش کار به این صورت است که با تایپ هر کلید در کادر مربوطه، ابتدا مقدار آن کادر را خوانده و سپس عبارات غیرعددی آن را حذف می‌کنیم. نهایتا آن را سه تا سه تا جدا کرده و با کاما به هم می‌چسبانیم و جایگزین مقدار فعلی می‌کنیم:

 

<script>

function format(input)

{

    var num=input.value.replace(/[^\d]/g,'');

    if(num.length>3)

        num = num.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');

    input.value=num;

}

</script>

<input onkeyup="format(this)" />

در صورتی که از jQuery هم استفاده می‌کنید، می‌توانید به فیلدهایی که قرار است مبلغ درج شود، یک کلاس اضافه کنید…

 

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script>

$(function(){

    $("input.pool").keyup(function(){

        var num = this.value.replace(/[^\d]/g, '');

        if(num.length>3)

            num = num.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');

        this.value = num;

     });

});

</script>

<input class="pool" />

البته دقت کنید که لازم است در سمت سرور نیز قبل از ذخیره در بانک، ابتدا کاما/ویرگول/ممیز/اسلش یا هر علامتی که برای جداسازی قرار داده شده را حذف کنید.