فرمت اتوماتیک برای ورودی کاربر در فرم

فرمت اتوماتیک برای ورودی کاربر در فرم

(Automatic Format for User Input)

فرمت اتوماتیک برای input فرم

 

فرمت اتوماتیک برای input فرم

در این آموزش، می خواهیم نحوه فرمت دادن به input های فرم را بررسی کنیم. مواردی مانند حذف کردن space، گذاشتن اتوماتیک dash و slash و… در لحظه تایپ کاربر در input، حذف کاراکترهای غیرمجاز و…

با فراگرفتن این آموزش، می توانید فرم هایی طراحی کنید که کاربر براحتی بتواند ورودی خود را تایپ کند. با اینکار، باعث بهبود تجربه کاربری (UX) خواهید شد و نیز خطاهای احتمالی ورودی کاربر بشدت کاهش خواهد یافت.

در این مقاله، دو مثال را باهم بررسی خواهیم کرد و در آنها از جی کوئری برای تسهیل در کدنویسی استفاده می کنیم. پس داشتن دانش کافی برای کار با کدهای جی کوئری از پیش نیازهای این مقاله می باشد.

 

۱- فرمت دادن به ورودی واحد پولی (Format Currency Input)

 

اعمال فرمت اتوماتیک به فیلد واحد پولی:

در تصویر زیر، کدهای html و css را نوشتیم و فعلا کدهای جی کوئری را وارد بازی نکرده ایم:

 

فرمت دادن به ورودی واحد پولی

 

کدهای HTML

<form id="form" method="post" action="">
        <label for="amount">Enter amount</label>
        <div class="flex">
            <span class="currency">$</span>
            <input id="amount" name="amount" type="text" maxlength="15" />
        </div>
</form>

کدهای CSS

    
html {
  box-sizing: border-box;
    font-family: 'PT Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
*, 
*:before, 
*:after {
  box-sizing: inherit;
}
body {
    background-color: #f3f3f3;
}
form {
    width: 100%;
    max-width: 300px;
    margin: 60px auto;
}
form input {
    font-size: 30px;
    padding: 0;
    border: 2px solid #ccc;
    border-left: 0;
    width: 100%;
    color: #666;
    border-radius: 0 7px 7px 0;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
}
form input:focus {
    outline: 0;
}
form input.error {
    border-color: #ff0000;  
}
form label.error {
    background-color: #ff0000;
    color: #fff;
    padding: 6px;
    font-size: 11px;
}
label {
    color: #999;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em
}
.flex {
    display: flex;
    justify-content: flex-start;
}
.flex input {
    max-width: 300px;
    flex: 1 1 300px;
}
.flex .currency {
    font-size: 30px;
    padding: 0 10px 0 20px;
    color: #999;
    border: 2px solid #ccc;
    border-right: 0;
    line-height: 2.5;
    border-radius: 7px 0 0 7px;
    background: white;
}

    

برای مشاهده و ویرایش سورس کد این مثال در CodePen کلیک کنید.

 

عدم اعمال فرمت برای ورودی کاربر:

با مراجعه به وب سایت CodePen و تایپ اعداد و حروف در input ، مشاهده می شود که هیچ فرمتی وجود ندارد و تمام ورودی های کاربر را قبول می کند. اینگونه input ها را می توان در فرم های پرداخت آنلاین بانکی مشاهده نمود.

دو مشکلی که در مواجه با اینگونه input ها معمولا مشهود است بصورت زیر است:

  • اکثر کاربران (مانند من!) در تشخیص تعداد صفرها دراعدادی مانند ۱۰۰۰۰۰ و ۱۰۰۰۰۰۰ مشکل دارند. مسلما بهتر است به ازای هر ۱۰۰۰ تا، یک جداکننده مانند ویرگول بطور اتوماتیک قرار داده شود.
  • برخی از کاربران، برای مشخص شدن تعداد صفرهای هر عدد، خودشان بصورت دستی علامت هایی مانند خط فاصله و یا ویرگول استفاده می کنند که این قضیه می تواند باعث ورودی نامعتبر شود.

 

شروع نوشتن کدهای جاوا اسکریپت:

در ابتدا دو المان را باید انتخاب (select) کنیم. input و form:

    
    var $form = $("#form");
    var $input = $form.find("input");
    

در صورتی که با جی کوئری (jQuery) آشنایی ندارید، به مقاله آموزش جی کوئری مراجعه فرمائید.

 

رویداد Keyup:

سپس باید هنگامی که کاربر در input در حال تایپ کردن است و بطور خاص، هنگامی که دکمه ای از صفحه کلید رها می شود (بالا می آید) متدی را فراخوانی کنیم. ابتدا کد زیر را در نظر بگیرید:

    
$input.on( "keyup", function( event ) {
    // ۱
    var selection = window.getSelection().toString();
    if ( selection !== '' ) {
        return;
    }
    // ۲
    if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
        return;
    }
} );
    

و اما تابع اصلی که وظیفه فرمت دادن به ورودی کاربران را دارد بصورت زیر است:

    
// ۱
var $this = $( this );
var input = $this.val();
// ۲
var input = input.replace(/[\D\s\._\-]+/g, "");
// ۳
input = input ? parseInt( input, 10 ) : 0;
// ۴
$this.val( function() {
    return ( input === 0 ) ? "" : input.toLocaleString( "en-US" );
} );
    

 

اعتبارسنجی های اعمال شده روی ورودی کاربر:

در دستورات جاوا اسکریپت فوق موارد زیر روی ورودی کاربر در فیلد واحد پولی اعمال می شوند:

۱- مقدار input را می گیرد.

۲- حذف کاراکترهای اضافه مانند / و و حروف از ورودی کاربر

۳- اطمینان از عدد (integer) بودن ورودی کاربر.

۴- افزودن جداکننده هزارگان (افزودن یک ویرگول بعد از سه رقم)

 

نکته: جداکننده می تواند با توجه به کشور واحد پول، متغیر باشد. مثلا ممکن است بجای علامت ویرگول، نقطه درج شود.

سورس کد این مثال را در وب سایت CodePen مشاهده کنید.

 

۲- فرمت دادن به فیلد شماره-سریال (Serial-Number)

 

اعمال فرمت اتوماتیک به فیلد شماره سریال:

فیلد دیگری که فرمت دادن به input آن، معنادار و کاربردی می باشد، فیلد شماره سریال (Serial Number) می باشد. بعنوان مثال، شماره سریال محصولات فروشگاه Envato را در نظر بگیرید:

 

چگونگی فرمت دادن به فیلد شماره-سریال

 

فرمت شماره سریال ورودی کاربر:

همانطور که مشاهده می کنید، سریال نامبر مذکور دارای ۳۶ کاراکتر می باشد و از ۳۲ کاراکتر و عدد و ۴ خط فاصله () تشکیل شده است. ورود صحیح این فرمت در فروشگاه Envato بسیار مهم و حیاتی می باشد. در این مثال ابتدا یک input را طراحی می کنیم و سپس استایل های موردنظر را به آن اعمال می کنیم. تصویر زیر را ملاحظه فرمائید:

 

فرمت دادن به سریال نامبر

 

مشاهده می کنید که فعلا هیچ فرمتی برای input فوق در نظر گرفته نشده است. زیرا هنوز هیچ کد جاوااسکریپتی برای آن ننوشته ایم.

برای مشاهده و ویرایش سورس کد این بخش، به وب سایت CodePen مراجعه نمایید.

 

فرمت دهی به فیلد سریال نامبر

 

تابع اصلی (Main Function):

بدنه کدهای جاوااسکریپت این مثال مانند مثال قبل (input واحد پولی) می باشد. تفاوت عمده بین این دو مثال، در تابع اصلی زیر می باشد:

 

    
// ۱
var $this = $(this);
var input = $this.val();
// ۲
input = input.replace(/[\W\s\._\-]+/g, '');
// ۳
var split = 4;
var chunk = [];
for (var i = 0, len = input.length; i = 8 && i <= 16 ) ? 4 : 8;
    chunk.push( input.substr( i, split ) );
}
// ۴
$this.val(function() {
    return chunk.join("-").toUpperCase();
});
    

 

اعتبارسنجی های فیلد serial number:

دستور خط ۱- مقدار ورودی کاربر را از input می گیرد.

دستور خط ۲- کاراکترهای غیرمجاز (مانند نقطه، خط فاصله، حروف فارسی و…) را حذف می کند.

دستور خط ۳- کاراکترها را به ۵ بخش تقسیم می کند. بخش های اول و پنجم دارای ۸ کاراکتر خواهند بود. سایر بخش ها (دوم، سوم و چهارم) شامل ۴ کاراکتر می باشند.

دستور خط ۴- هر بخش را با خط فاصله بهم می چسباند. حروف را به حروف بزرگ (Uppercase) تبدیل می کند و در نهایت، مقدار تولیدی را به input نسبت می دهیم.

برای مشاهده و ویرایش سورس کد کامل مثال دوم، به وب سایت CodePen مراجعه شود. همچنین می توانید سورس کد فرمت دهی به input شماره سریال را دانلود کنید.

 

جایزه (Bonus!):

در بخش آخر، بعنوان هدیه! می خواهیم فیلد تاریخ (Date) را فرمت دهی کنیم. بصورتی که فرمت Month/Day/Year را برای تاریخ های میلادی پیاده سازی کنیم.

 

فرمت دهی فیلد تاریخ (Date)

 

می توانید سورس کد این مثال را از طریق این لینک دانلود کنید و همچنین می توانید سورس کد مربوط به فرمت دهی تاریخ را از طریق وب سایت CodePen ، بصورت آنلاین مشاهده و ویرایش کنید.

شما با مطالعه و بررسی سه مثالی که بیان کردیم، می توانید input های دلخواه خود را فرمت دهی کنید. بعنوان مثال، input مربوط به نام کاربری را بصورتی فرمت دهید که کاربر نتواند حروف بزرگ را تایپ کند (و تنها حروف کوچک-lowercase مجاز باشد).

 

منبع: https://webdesign.tutsplus.com/tutorials/auto-formatting-input-value–cms-26745


برچسب‌ها:

آموزش فرمت دهیرویداد Keyupفرمت اتوماتیکفرمت فیلد تاریخفرمت ورودی کاربرفیلد شماره-سریالورودی کاربر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

چهار × 5 =