Friday, June 25, 2010

How to mask credit card number using javascript - Asp.net Javascripts

<%@ Page Language="C#"  %>
<html>
<head id="Head1" runat="server">
    <script runat="server">
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            this.txtCreditCardNo.Attributes.Add("onkeyup""javascript:Mask(this)");
        }
    </script>
    <script language="javascript" type="text/javascript">
        function Mask(obj, evt) {
            evt = (evt) ? evt : window.event
            var charCode = (evt.which) ? evt.which : evt.keyCode
            var txtValue = window.document.getElementById('txtCreditCardNo');
            if ((charCode < 45 || charCode > 57) && charCode != 8
                    && charCode != 37 && charCode != 39) {
                alert("This field accepts numbers only");
                txtValue.value = txtValue.value.substr(0, txtValue.value.length - 1);
                return false
            }
            else {
                var hdnValue = window.document.getElementById('hdnCreditCardNo');
                if (charCode == 8) {
                    if (hdnValue.value.length > txtValue.value.length) {
                        hdnValue.value = hdnValue.value.substr(0, txtValue.value.length);
                    }
                }
                else {
                    hdnValue.value = hdnValue.value + String.fromCharCode(charCode);
                }
            }
            if (txtValue.value.length > 5) {
                txtValue.value = "*****" + txtValue.value.substr(5, txtValue.value.length);
            }
            else {
                var mask = "";
                for (i = 0; i < txtValue.value.length; i++) mask += "*";
                txtValue.value = mask;
            }
            return true
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox runat="server" ID="txtCreditCardNo" />
        <asp:TextBox runat="server" ID="hdnCreditCardNo" Text="" />
    </form>
</body>
</html>

1 comment:

Anonymous said...

Nice script, thank you.

iPhone Launch Screen Sizes

iPhone Portrait iOS 8 Retina HT 5.5 = 1242 X 2208 Retna HD 4.7 = 750 X 1134 iPhone Landscape iOS 8 Retina HD 5.5  2208 X 1242 iPho...