Fatal编程技术网
  • jquery/
  • ASP.NET jQuery不工作

ASP.NET jQuery不工作

jquery asp.net

ASP.NET jQuery不工作,jquery,asp.net,Jquery,Asp.net,我正在尝试创建一些仅限数字的文本框，当在JSFIDLE上测试时，这是有效的，但在我的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/j

我正在尝试创建一些仅限数字的文本框，当在JSFIDLE上测试时，这是有效的，但在我的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>


jQuery.fn.ForceNumericOnly=
函数（）{
返回此。每个（函数（）{
$（此）.keydown（函数（e）{
var key=e.charCode | | e.keyCode | | 0；
返回(
键==8||
键==9||
键==46||
键==110||
键==190||

（key>=35&&key=48&&key=96&&key您必须等待DOM真正准备好执行脚本。请尝试：


$(document).ready(function() {
    $('input[id$=varA]').ForceNumericOnly();
    $("#varB").ForceNumericOnly();
    $("#varC").ForceNumericOnly();
});



尝试将脚本修改为：


$(document).ready(function() {
   $('input[id$="varA"]').ForceNumericOnly();
   $('input[id$="varB"]').ForceNumericOnly();
   $('input[id$="varC"]').ForceNumericOnly();
});



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

还请注意，ASP.net可能会更改您文本框的ID。您已在第一部分中满足了这一要求：


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


但不是其他两个。您也可以为它们指定特定的CSS类（ASP.net不会更改这些类），或者将ClientIDMode设置为“Static”：


<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>





输入变量a:


输入变量c:


输入变量b:








这是一个有效的解决方案，只使用一个jQuery库

使用
$（document）.ready
并在jQuery中像



jQuery.fn.ForceNumericOnly=
函数（）{
返回此。每个（函数（）{
$（此）.keydown（函数（e）{
var key=e.charCode | | e.keyCode | | 0；
返回(
键==8||
键==9||
键==46||
键==110||
键==190||

（key>=35&&key=48&&key=96&&key如果要包含jQuery两次，请删除jQuery-1.4.1.min.js行谢谢，这很有效。最终使用了您建议的CSS类，因为我在同一页面中有3个以上的文本框。

<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>



<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>