【问题标题】:Changing input fields更改输入字段
【发布时间】:2019-04-01 11:47:25
【问题描述】:

我遇到了一种情况,我正在使用 jquery 验证输入类型。 我有 html 下拉列表,其中包含不同的参数("select:first-child")。 我正在尝试根据这些参数验证输入框,为此我在 jquery 中编写了以下代码。 例如- 如果我选择“数量”,那么输入框应该只输入数字。 如果我选择“TradeDate”,那么输入框应该是日期。

现在的问题是,当我选择类型为 date 的参数时,datepicker 会出现选择日期。 但是当我选择任何其他类型为数字的参数时,输入仍然显示日期选择器。

所以,我错了,我每次都想要这个验证

这里 var type[1] 包含参数的类型,例如。浮点数、日期、字符等

 $("#cond_div").children("select:first-child").change(function(event){
            var temp = $(this).val();
            var type = temp.split("_");

            $("#cond_div").children("input").on("keypress keyup", function () {

                if (type[1].localeCompare("date") == 0) {
                    $(this).datepicker();
                } 
                else if (type[1].localeCompare("float") == 0) {
                    $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
                    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
                        event.preventDefault();
                    }
                } 
                else if (type[1].localeCompare("int") == 0) {
                    $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
                    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
                        event.preventDefault();
                    }
                }
            });
        });

【问题讨论】:

    标签: javascript jquery html jquery-ui


    【解决方案1】:

    一旦您使用 .datepicker() 创建者转换了输入,它就会一直保持这种状态,直到您通过调用 .datepicker("destroy") 函数将其销毁。

    【讨论】:

    • 嗨@ChrisBE,在按键事件发生之前添加了 .datepicker("destroy") ......但是当我选择数字参数然后选择字符串值的参数时......它不允许我输入字符,反之亦然
    • Actually, you destroy the datepicker when the select changes to anything else than a date
    • 是的,但是如何使用其他数据类型逻辑来做到这一点? @ChrisBE
    • 理想情况下,您可能希望将 select.change 和 input.on(keypress keyup) 函数分开。选择更改时,相应地调整输入(激活或销毁DatePicker)。在您输入的按键上,根据选择值进行输入验证。
    【解决方案2】:

    已解决... 与其走复杂的逻辑,不如找到一个简单的方法

    $(document).ready(function () {
        $("#cond_div").children("select:first-child").change(function (event) {
            var temp = $(this).val();
            var type = temp.split("_");
            console.log("->" + temp);
            console.log("->" + type);
    
            $("#cond_div").children("input").val("");
            $("#cond_div").children("input").datepicker("destroy");
    
    
            if (type[1].localeCompare("date") === 0) {
                console.log(type[1]);
                $("#cond_div").children("input").datepicker();
            } else if (type[1].localeCompare("char") === 0) {
                console.log(type[1]);
                $("#cond_div").children("input").attr("type", "text");
            } else if (type[1].localeCompare("float") === 0) {
                console.log(type[1]);
                $("#cond_div").children("input").attr("type", "number");
    
            } else if (type[1].localeCompare("int") === 0) {
                console.log(type[1]);
                $("#cond_div").children("input").attr("type", "number");
            }
        });
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-10-04
      • 2011-05-01
      • 2021-10-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多