0

我正在尝试创建一些纯数字文本框，这在 JSfiddle 上测试时有效，但在我的 ASP.NET 项目中无效。代码：

母版页头：

<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery.fn.ForceNumericOnly =
            function () {
                return this.each(function () {
                    $(this).keydown(function (e) {
                        var key = e.charCode || e.keyCode || 0;
                        return (
                        key == 8 ||
                        key == 9 ||
                        key == 46 ||
                        key == 110 ||
                        key == 190 ||
                        (key >= 35 && key <= 40) ||
                        (key >= 48 && key <= 57) ||
                        (key >= 96 && key <= 105));
                    });
                });
            };

    $('input[id$=varA]').ForceNumericOnly();
    $("#varB").ForceNumericOnly();
    $("#varC").ForceNumericOnly();
 </script>

主要内容占位符内的默认 Web 表单：

    <div id="addition" runat="server">
    <p>
    Input variable a : <asp:TextBox runat="server" ID="varA"></asp:TextBox><br /><br />
    Input variable c : <asp:TextBox runat="server" ID="varB"></asp:TextBox><br /><br />
    Input variable b : <asp:TextBox runat="server" ID="varC"></asp:TextBox><br /><br />
    <asp:Button ID="additionSubmit" runat="server" Text="Submit"  
            onclick="additionSubmit_Click" /><br /><br />
     <asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>
4

4 回答 4

1

其他答案已经提到将其包装在 document.ready 中；这解决了部分问题。

还要注意 ASP.net 可能会更改您的文本框的 ID。你一开始就解决了这个问题：

$('input[id$=varA]').ForceNumericOnly();

但不是其他两个。您还可以为它们分配特定的 CSS 类（ASP.net 不会更改），或将 ClientIDMode 设置为“静态”：

<div id="addition" runat="server">
    <p>
        Input variable a : <asp:TextBox ClientIDMode="Static" runat="server" ID="varA"></asp:TextBox><br /><br />
        Input variable c : <asp:TextBox ClientIDMode="Static" runat="server" ID="varB"></asp:TextBox><br /><br />
        Input variable b : <asp:TextBox ClientIDMode="Static" runat="server" ID="varC"></asp:TextBox><br /><br />
        <asp:Button ID="additionSubmit" runat="server" Text="Submit"  
            onclick="additionSubmit_Click" /><br /><br />
        <asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>
于 2013-07-08T09:54:09.573 回答
0

尝试修改你的脚本成为：

$(document).ready(function() {
   $('input[id$="varA"]').ForceNumericOnly();
   $('input[id$="varB"]').ForceNumericOnly();
   $('input[id$="varC"]').ForceNumericOnly();
});
于 2013-07-08T09:52:00.690 回答
0

Here is working solution, use only one jQuery library.

Use $(document).ready and use ClientID in jQuery like <%= VarA.ClientID %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery.fn.ForceNumericOnly =
            function () {
                return this.each(function () {
                    $(this).keydown(function (e) {
                        var key = e.charCode || e.keyCode || 0;
                        return (
                        key == 8 ||
                        key == 9 ||
                        key == 46 ||
                        key == 110 ||
                        key == 190 ||
                        (key >= 35 && key <= 40) ||
                        (key >= 48 && key <= 57) ||
                        (key >= 96 && key <= 105));
                    });
                });
            };
            $(document).ready(function () {
                $('#<%= varA.ClientID %>').ForceNumericOnly();
                $("#<%= varB.ClientID %>").ForceNumericOnly();
                $("#<%= varC.ClientID %>").ForceNumericOnly();
            });
    </script>
</head>
<body>
    <form runat="server">
    <div id="addition" runat="server">
        <p>
            Input variable a :
            <asp:TextBox runat="server" ID="varA"></asp:TextBox><br />
            <br />
            Input variable c :
            <asp:TextBox runat="server" ID="varB"></asp:TextBox><br />
            <br />
            Input variable b :
            <asp:TextBox runat="server" ID="varC"></asp:TextBox><br />
            <br />
            <asp:Button ID="additionSubmit" runat="server" Text="Submit" onclick="additionSubmit_Click"/><br />
            <br />

            <asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
        </p>
    </div>
    </form>
</body>
</html>
于 2013-07-08T10:00:58.610 回答
0

您必须等到您的 DOM 真正准备好执行您的脚本。尝试：

$(document).ready(function() {
    $('input[id$=varA]').ForceNumericOnly();
    $("#varB").ForceNumericOnly();
    $("#varC").ForceNumericOnly();
});
于 2013-07-08T09:50:12.887 回答