使用 Jquery 向文本框添加类的问题

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

您需要将更改事件放入准备好的文档中，并且需要将.number的keydown事件注册到on。

       $(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里面
检查下面更新的 sn-p..

    $(".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>