[ASP.NET][JavaScript] TextBox限制輸入數字

2013-04-12

13188
0
2014-02-25

在頁面中透過JavaScript來設定是否回應輸入按鍵

<head runat="server">
    <title></title>
    
    <script type="text/javascript" language="javascript">
        function IsIntText() {
            var charkeycode = window.event.keyCode;
            if (charkeycode > 47 && charkeycode < 58) {
                return true;
            }
            return false;
        }

        function IsFloatText() {
            var charkc = window.event.keyCode
            if (charkc == 46 || (charkc >= 48 && charkc <= 57)) {
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtInt" runat="server" onkeypress="return IsIntText();"></asp:TextBox>
        <asp:TextBox ID="txtFloat" runat="server" onkeypress="return IsFloatText();"></asp:TextBox>
        <asp:TextBox ID="txtcodebehind" runat="server"></asp:TextBox>
    </div>
    </form>
</body>

另外也可以在CodeBehind中進行設定

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //gvBind(GridView1);
        txtcodebehind.Attributes.Add("OnKeyPress", "");
        txtcodebehind.Attributes.Add("OnKeyPress", "if(event.keyCode>=48 && event.keyCode<=57) return true; else return false;");
    }
}

KeyCode的部分，就請自行查詢了。

===================================================================================================

================================ 2013-08-08 =======================================================

前陣子剛好又把這個拿出來看看，現在 HTML5 都有 Input Type: number 非常便利

加上後來看到 keypress 在對於中文等一些輸入法的的辨識上，有些神奇的地方，詳細

請見黑大的中文輸入法與KeyDown/KeyPress事件，因此想用 CSS 中的 IME-Mode 來

把輸入法轉換掉。

CSS 的設定

        .myclass
        {
            width: 200px;
            ime-mode: disabled;
            -moz-ime-mode: disabled;
            -ms-ime-mode: :disabled;
            -webkit-ime-mode: disabled;
        }

Javascript 部分，最後的 type 轉換 number 係為了 chrome 的關係

因為 chrome 更新後 ime-mode 失效了，但因為 chrome 支援 HTML5

所以直接將 input 轉為 number

        $(function () {
            $("#txtDis").bind("keypress", function (e) {
                var ecode = e.charCode || e.keyCode;
                var oElement = e.target || e.srcElement;
                if (!e.shiftKey && !e.ctrlKey && !e.altKey) {
                    // Allow Number
                    if ((ecode > 47 && ecode < 58) ||
                    // Allow escape, and enter
                           ecode == 27 || ecode == 13) {
                        oElement.value = oElement.value;
                    }
                    else {
                        if (window.event) //IE
                            event.returnValue = false;
                        else //Firefox
                            e.preventDefault();
                    }
                }
            }).attr("type", "number");
        });

整頁 HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .myclass
        {
            width: 200px;
            ime-mode: disabled;
            -moz-ime-mode: disabled;
            -ms-ime-mode: :disabled;
            -webkit-ime-mode: disabled;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#txtDis").bind("keypress", function (e) {
                var ecode = e.charCode || e.keyCode;
                var oElement = e.target || e.srcElement;
                if (!e.shiftKey && !e.ctrlKey && !e.altKey) {
                    // Allow Number
                    if ((ecode > 47 && ecode < 58) ||
                    // Allow escape, and enter
                           ecode == 27 || ecode == 13) {
                        oElement.value = oElement.value;
                    }
                    else {
                        if (window.event) //IE
                            event.returnValue = false;
                        else //Firefox
                            e.preventDefault();
                    }
                }
            }).attr("type", "number");
        });
    </script>
</head>
<body>
    <form>
    <div>
        <input id="txtDis" class="myclass" type="text" size="10" value=''>
        <input type="submit">
    </div>
    </form>
</body>
</html>

測試畫面：

參考資料：

W3C_CSS Basic User Interface Module Level 3

-ms-ime-mode property

測試頁面下載

回首頁