Monday, 9 July 2012

Masked Edit Text Box Using Java Script


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function SetAccountNum(keycode, objCtrl) {
            if ((keycode > 47 && keycode < 58) || (keycode > 95 && keycode < 106)) {
                var Ctrlval = objCtrl.value.trim().replace(/ /g, "");
                if (Ctrlval.length == 0) return;

                //Split Characters
                var arrvalue = Ctrlval.split("");
                var j = 0, result = "";

                for (var i = 0; i < arrvalue.length; i++) {
                    if (j == 3) {
                        result = result + " " + arrvalue[i];
                        j = 0;
                    }
                    else {
                        result = result + arrvalue[i];
                    }
                    j++;
                }
                window.document.getElementById("<%=txtAcc.ClientID %>").value = result;
                //SetCursorToTextEnd(objCtrl);
            }
      }

      function SetCursorToTextEnd(text) {
          if (text != null && text.value.length > 0) {
              if (text.createTextRange) {
                  var FieldRange = text.createTextRange();
                  FieldRange.moveStart('character', text.value.length);
                  FieldRange.collapse();
                  FieldRange.select();
              }
          }
      }

      function BlockChar(keycode) {
          return ((keycode > 47 && keycode < 58) || (keycode > 95 && keycode < 106));
      }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtAcc" runat="server" Height="38px" Width="417px" onkeyup="javascript:SetAccountNum(event.keyCode,this);" onkeydown="javascript:return BlockChar(event.keyCode);"></asp:TextBox>
    </div>
    </form>
</body>
</html>

No comments:

Post a Comment