وارد کردن جزئیات کارت بانکی در textbox با استفاده از Javascript

در این مقاله قصد داریم با استفاده از Javascript در ASP.net اطلاعات روی کارت های بانکی را در textbox وارد کنیم. با توجه به 16 رقمی بودن کارتهای بانکی، چهار textbox برای شماره کارت در نظر گرفته می شود. در هر کدام از textbox ها فقط چهار عدد قرار گرفته و نشانگر به صورت خودکار به textbox بعدی فرستاده شود.

برای شروع یک پروژه خالی ایجاد میکنیم.

یک webform به آن اضافه کده و منابع Bootstrap را به پروژه اضافه میکنیم. (با استفاده از Nuget pakage manager یا drag&drop فایل دانلود شده)

کدهای زیر را در فرم وارد میکنیم.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits="CreditCardDetailsCaptureTextBox.demo" %>  
       
       
    <!DOCTYPE html>  
       
    <html>  
    <head runat="server">  
        <title>Credit Card Details Capture using JavaScript</title>  
        <link href="Content/bootstrap.min.css" rel="stylesheet" />  
        <script type="text/javascript">  
            function moveFocus(from, to) {  
                var length = from.value.length;  
                var maxLength = from.getAttribute("maxLength");  
                if (length == maxLength) {  
                    document.getElementById(to).focus();  
                }  
            };  
        </script>  
    </head>  
    <body class="container-fluid">  
        <form id="form1" runat="server">  
            <div id="creditCardDetailsTextboxes" class="jumbotron">  
                Enter Card Number:  
                <asp:TextBox ID="TextBox1" runat="server"  MaxLength="4" Width="50px" onkeyup="moveFocus(this,'TextBox2')"></asp:TextBox>  
                <asp:TextBox ID="TextBox2" runat="server"  MaxLength="4" Width="50px" onkeyup="moveFocus(this,'TextBox3')"></asp:TextBox>  
                <asp:TextBox ID="TextBox3" runat="server"  MaxLength="4" Width="50px" onkeyup="moveFocus(this,'TextBox4')"></asp:TextBox>  
                <asp:TextBox ID="TextBox4" runat="server"  MaxLength="4" Width="50px"></asp:TextBox>  
            </div>  
        </form>  
    </body>  
    </html>

تگ زیر یک لینک به فایل bootstrap است.

 <link href="Content/bootstrap.min.css" rel="stylesheet" />

در قسمت javascript ، طول داده های ورودی هر textbox را تعیین کرده و طول رشته وارد شده را با maxlenght مقایسه میکنیم.

در کد بالا قسمت مهم رویداد keyup است ، زمانی که 4 کارکتر وارد شود متد جاوا اسکریپت صدا زده شده و نشانگر به textbox بعدی منتقل می شود.

خروجی به صورت زیر خواهد بود .

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

3902_CreditCardDetails.rar

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

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

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

وارد کردن جزئیات کارت بانکی در textbox با استفاده از Javascript

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

برنامه نویسان

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