使用Jquery將類添加到TextBox中的問題

Question

基本上，我正在研究一個簡單的功能。 但是當我嘗試將addClass到任何HTML元素時，它卡在了一部分上不起作用。

我有兩個HTML元素

1. DocType的下拉菜單
2. DocNumber的文本框。

基於在DocType中選擇的值，我需要更改DocNumber的類，該類將處理DocNumber文本框的驗證部分。

這是我的腳本代碼。

$(document).ready(function () {
    $(".number").keydown(function (e) {
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
        (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        return;
    }
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
        }
    });
 });

$('#ddlDoctype').on('change', function () {
    var validateCriteria = $(this).find("option:selected").val();
    if (validateCriteria == "A") {
    $("#txtDocNumber").addClass("minSize[8]");
    $("#txtDocNumber").addClass("number");
    $("#txtDocNumber").removeClass("minSize[12]");
} else if (validateCriteria == "E") {
    $("#txtDocNumber").addClass("minSize[12]");
    $("#txtDocNumber").removeClass("minSize[8]");
    $("#txtDocNumber").addClass("number");
} else if (validateCriteria == "C") {
    $("#txtDocNumber").removeClass("number");
} else {
    $("#txtDocNumber").removeClass("number");
}
});

這里要注意的一件好事是，當我向文本框中添加minSize[8] ，該文本已分配，但未將數字類分配給該文本框。 當我在手表中添加該部件時，得到的結果是分配了number類別，但它無法正常工作，並且允許用戶輸入字母。

即使嘗試了多種解決方法，我也無法擺脫它。 如果有任何幫助，我將不勝感激。

Answer 1

您需要准備文檔中的更改事件，並需要on注冊.number keydown事件。

       $(document).ready(function () {
            $(document).on('keydown', '.number', function (e) {
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
                    (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
                    (e.keyCode >= 35 && e.keyCode <= 40)) {
                    return;
                }
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });
            $('#ddlDoctype').on('change', function () {
                var validateCriteria = $(this).find("option:selected").val();
                if (validateCriteria == "A") {
                    $("#txtDocNumber").addClass("minSize[8]");
                    $("#txtDocNumber").addClass("number");
                    $("#txtDocNumber").removeClass("minSize[12]");
                } else if (validateCriteria == "E") {
                    $("#txtDocNumber").addClass("minSize[12]");
                    $("#txtDocNumber").removeClass("minSize[8]");
                    $("#txtDocNumber").addClass("number");
                } else if (validateCriteria == "C") {
                    $("#txtDocNumber").removeClass("number");
                } else {
                    $("#txtDocNumber").removeClass("number");
                }
            });
        });

Answer 2

按照提供的小提琴，您忘記了兩件事
1.您錯過了jQuery庫
2. $('#ddlDocType')應該在$(document).ready
檢查下面的更新的片段。

  $(".number").keydown(function (e) { if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 || (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || (e.keyCode >= 35 && e.keyCode <= 40)) { return; } if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } }); $('#ddlDocType').on('change', function () { var validateCriteria = $(this).val(); if (validateCriteria == "A") { $("#txtDocNumber").addClass("number"); } else if (validateCriteria == "E") { $("#txtDocNumber").addClass("number"); } else if (validateCriteria == "C") { $("#txtDocNumber").removeClass("number"); } else { $("#txtDocNumber").removeClass("number"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Document Type: <select id="ddlDocType"> <option value="A">Pan</option> <option value="E">Adhar</option> <option value="E">Passport</option> <option value="D">Driving Licence</option> </select> </br> </br> Document Number: <input type="text" name="docNum" id="txtDocNumber"><br>