使用Javascript禁用TextBox+MVC3中的空格键

奇怪，出了什么问题？感谢

来源

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>

我错过了，还是因为它们不是最新的？

脚本

$(document).ready(function(){ 
    $(".Search").keydown(function(event) {
        if (event.keyCode == 32) {
            event.preventDefault();
        }
    });
});

查看

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-16" />
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" media="screen,projection" type="text/css" href="@Url.Content("~/Content/newKaizen/css/reset.css")" />
    <!-- RESET -->
    <link rel="stylesheet" media="screen,projection" type="text/css" href="@Url.Content("~/Content/newKaizen/css/main.css")" />
    <!-- MAIN STYLE SHEET -->
    <link rel="stylesheet" media="screen,projection" type="text/css" href="@Url.Content("~/Content/newKaizen/css/2col.css")" title="2col" />
    <!-- DEFAULT: 2 COLUMNS -->
    <link rel="alternate stylesheet" media="screen,projection" type="text/css" href="@Url.Content("~/Content/newKaizen/css/1col.css")" title="1col" />
    <!-- ALTERNATE: 1 COLUMN -->
    <link rel="stylesheet" media="screen,projection" type="text/css" href="@Url.Content("~/Content/newKaizen/css/style.css")" />
    <!-- GRAPHIC THEME -->
    <link rel="stylesheet" media="screen,projection" type="text/css" href="@Url.Content("~/Content/newKaizen/css/mystyle.css")" />
    <!-- WRITE YOUR CSS CODE HERE -->
    <!--[if lte IE 6]><link rel="stylesheet" media="screen,projection" type="text/css" href="@Url.Content("~/Content/newKaizen/css/main-ie6.css")" /><![endif]-->
    <!-- MSIE6 -->
    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/EditorHookup.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.validation.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <!--<script src="@Url.Content("~/Scripts/RangeDateValidator.js")" type="text/javascript"></script>-->
    <script type="text/javascript">
        $(document).ready(function () {     
            $(".appt_date").datepicker({
                gotoCurrent: true,
                dateFormat: 'dd/mm/yy',
                minDate: 0,
                numberOfMonths: 2
            });
        });

    $(function() {
        var dates = $("#StartDate, #EndDate").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2,
            minDate:0,
            onSelect: function( selectedDate ) {
                var option = this.id == "StartDate" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
});
$(document).ready(function(){ 
    $(".Search").keydown(function(event) {
        if (event.keyCode == 32) {
            event.preventDefault();
        }
    });
});
    </script>
</head>
<body>
    <div id="main">
        <!-- Tray -->
        <div id="tray" class="box">
            <p class="f-left box">
            </p>
            <p class="f-right">
                User: <strong><a href="#">@Context.User.Identity.Name</a></strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <strong><a href="@Url.Action("LogOff", "Account")" id="logout">Log out</a></strong></p>
        </div>
        <!--  /tray -->
        <hr class="noscreen" />
        <!-- Menu -->
        <div id="menu" class="box">
            <ul class="box">
                <h3 style="color: #fff; font-size: 1.5em;">
                    Memory Clinic Management System</h3>
            </ul>
        </div>
        <!-- /header -->
        <hr class="noscreen" />
        <!-- Columns -->
        <div id="cols" class="box">
            <!-- Aside (Left Column) -->
            <div id="aside" class="box">
                <div class="padding box">
                    <!-- Logo (Max. width = 200px) -->
                    <p id="logo">
                        <a href="@Url.Action("Index", "Patient")">
                            <img src="@Url.Content("~/Content/newKaizen/design/logo.jpg")" alt="KTPH logo" title="Visit Site" /></a></p>
                    @if (@Context.User.Identity.Name == "admin")
                    {
                        <!-- Search -->
                        <form action="#" method="get" id="search">
                        <fieldset>
                            <legend>Search</legend>
                            <p>@Html.TextBox("SearchString", "", new { @class = "Search" })</p>
                            <br />
                            <input type="submit" value="Search" class="input-submit-02" /><br />
                        </fieldset>
                        </form>
                        <!-- Create a new patient -->
                        <p id="btn-create" class="box">
                            <a href="@Url.Action("Create", "Patient")"><span>Add new Patient</span></a></p>
                    }
                </div>
                <!-- /padding -->
                <ul class="box">
                    @if (IsSectionDefined("PatientsManagement"))
                    {
                        @RenderSection("PatientsManagement")
                        <li id="submenu-active"><a href="@Url.Action("Index", "Patient")">Patients Management</a>
                            <ul>
                                <li>@Html.ActionLink("View All Patients", "Index", "Patient")</li>
                                <li>@Html.ActionLink("Appointments", "Index", "Appointment")</li>
                            </ul>
                        </li>
                    }
                    else
                    {
                        <li id="submenu-nonactive"><a href="@Url.Action("Index", "Patient")">Patients Management</a>
                            <ul>
                                <li>@Html.ActionLink("View All Patients", "Index", "Patient")</li>
                                <li>@Html.ActionLink("Appointments", "Index", "Appointment")</li>
                            </ul>
                        </li>
                    }
                    @if (IsSectionDefined("FormsManagement"))
                    {
                        @RenderSection("FormsManagement")
                        <li id="submenu-active"><a href="@Url.Action("CGSIndex", "Test")">Forms Management</a>
                            <ul>
                                <li>@Html.ActionLink("Caregiver Survey", "CGSIndex", "Test")</li>
                                <li>@Html.ActionLink("Patient Assessment", "PAIndex", "Test")</li>
                                <li>@Html.ActionLink("Generate Forms", "Generate", "Survey")</li>
                            </ul>
                        </li>
                    }
                    else
                    {
                        <li id="submenu-nonactive"><a href="@Url.Action("CGSIndex", "Test")">Forms Management</a>
                            <ul>
                                <li>@Html.ActionLink("Caregiver Survey", "CGSIndex", "Test")</li>
                                <li>@Html.ActionLink("Patient Assessment", "PAIndex", "Test")</li>
                                <li>@Html.ActionLink("Generate Forms", "Generate", "Survey")</li>
                            </ul>
                        </li>
                    }
                    @if (IsSectionDefined("ReportsAnalytics"))
                    {
                        @RenderSection("ReportsAnalytics")
                        <li id="submenu-active"><a href="#">Reports & Analytics</a>
                            <ul>
                                <li><a href="#">Consultation Respository</a></li>
                                <li><a href="#">Generate Reports</a></li>
                            </ul>
                        </li>
                    }
                    else
                    {
                        <li id="submenu-nonactive"><a href="#">Reports & Analytics</a>
                            <ul>
                                <li><a href="#">Consultation Respository</a></li>
                                <li><a href="#">Generate Reports</a></li>
                            </ul>
                        </li>
                    }
                </ul>
            </div>
            <!-- /aside -->
            <hr class="noscreen" />
            <!-- Content (Right Column) -->
            <div id="content" class="box">
                @RenderBody()
            </div>
            <!-- /content -->
        </div>
        <!-- /cols -->
        <hr class="noscreen" />
        <!-- Footer -->
        <div id="footer" class="box">
            <p class="f-left">
                </p>
        </div>
        <!-- /footer -->
    </div>
    <!-- /main -->
</body>
</html>

标记

<input class="Search" id="SearchString" name="SearchString" type="text" value="         " />

资源Jquery禁用空格键

Ready函数有问题（下面的代码有一些问题）

<script type="text/javascript">
        $(document).ready(function () {     
            $(".appt_date").datepicker({
                gotoCurrent: true,
                dateFormat: 'dd/mm/yy',
                minDate: 0,
                numberOfMonths: 2
            });
        });

    $(function() {
        var dates = $("#StartDate, #EndDate").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2,
            minDate:0,
            onSelect: function( selectedDate ) {
                var option = this.id == "StartDate" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
});
$(document).ready(function(){ 
    $(".Search").keydown(function(event) {
        if (event.keyCode == 32) {
            event.preventDefault();
        }
    });
});
    </script>

请仅将所有javascript放在一个就绪函数中。请用下面的代码重写您的代码。

$(function() {
        var dates = $("#StartDate, #EndDate").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2,
            minDate:0,
            onSelect: function( selectedDate ) {
                var option = this.id == "StartDate" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
 $(".Search").keydown(function(event) {
        if (event.keyCode == 32) {
            event.preventDefault();
        }
    });
 $(".appt_date").datepicker({
                gotoCurrent: true,
                dateFormat: 'dd/mm/yy',
                minDate: 0,
                numberOfMonths: 2
            });
});

你能用下面的代码重写你的代码吗

$(document).ready(function(){ 
    $("#SearchString").keydown(function(event) {
        if (event.keyCode == 32) {
            event.preventDefault();
        }
    });
});

相关内容

最新更新

热门标签：