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();

しかし、他の2つはありません。特定の 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>
于 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

これが実用的なソリューションです。jQuery ライブラリは 1 つだけ使用してください。

$(document).readyjQueryのようにClientIDを使用して使用する<%= 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 に答える