Question

我在MVC项目中使用Razor渲染html。 html本身位于bootstrap模式中，因此您单击一个按钮，并使用以下代码加载模态：

<div class="modal-dialog" id="showDetailsForm">
    <div class="modal-content" id="formEditDetails">
        <div class="modal-header">
            <a class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
            <h2>Event Details</h2>
        </div>
        <div class="modal-body">
            <div class="form-group">
                @Html.ValidationSummary()
            </div>
            <div class="form-group">
                @Html.LabelFor(m => Model.Calendar.EventName, new { @class = "control-label" })
                @Html.TextBoxFor(m => Model.Calendar.EventName, new { @id = "SelectedEventTitle", @class = "form-control formTextBox" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => Model.Calendar.DateScheduled, new { @class = "control-label" })
                @Html.TextBoxFor(m => Model.Calendar.DateScheduled, new { @id = "SelectedDateTime", @class = "form-control formTextBox", @readonly = "readonly" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => Model.Calendar.TimeScheduled, new { @class = "control-label" })
                @Html.TextBoxFor(m => Model.Calendar.TimeScheduled, new { @id = "SelectedTime", @class = "form-control formTextBox", @readonly = "readonly" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => Model.Calendar.EventLength, new { @class = "control-label" })
                @Html.TextBoxFor(m => Model.Calendar.EventLength, new { @id = "SelectedAppointmentLength", @class = "form-control numericOnly formTextBox" })
            </div>
        </div>
        <br />
        <br />
        <div class="modal-footer">
            <input type="submit" value="Save" id="btnSaveDetailsReferral" class="parsButton" />
            <input type="button" value="Cancel" id="btnShowDetailsCancel" class="parsButton" aria-hidden="true" data-dismiss="modal" />
        </div>
    </div>
</div>

这一切都很好，它的行为和看起来应该如何。我的问题在线

@Html.TextBoxFor(m => Model.Calendar.EventLength, new { @id = "SelectedAppointmentLength", @class = "form-control numericOnly formTextBox" })

我希望此文本框仅允许数字输入。我知道我可以在提交表单时使用验证，但我不想那样做，我只想在打字时只在数字框中显示数字，如果你键入或粘贴其他内容，它们将无法正常工作。我试过@ type =“number”，但没用。我还有以下jquery代码，它实际上适用于项目的另一部分：

$(".numericOnly").bind('keypress', function (e) {
    if (e.keyCode == '9' || e.keyCode == '16') {
        return;
    }
    var code;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    if (e.which == 46)
        return false;
    if (code == 8 || code == 46)
        return true;
    if (code < 48 || code > 57)
        return false;
});

//Disable paste
$(".numericOnly").bind("paste", function (e) {
    e.preventDefault();
});

$(".numericOnly").bind('mouseenter', function (e) {
    var val = $(this).val();
    if (val != '0') {
        val = val.replace(/[^0-9]+/g, "");
        $(this).val(val);
    }
});

但由于某种原因，它在模态中的此文本框上不起作用。它适用于非模态的其他文本框，完全符合预期。任何人都可以确定问题是什么，或者我做错了什么？

无法获取仅数字文本框输入

0 个答案: