Question

我找到了一些解释，解释了如何从文本框中移除Kendo UI kendoDatePicker小部件http://www.kendoui.com/forums/ui/general-discussions/method-for-removing-controls.aspx和http://www.kendoui.com//forums/ui/date-time-pickers/datepicker-becomes-static.aspx

不幸的是，当我尝试删除NumericTextBox的属性时，上面的示例似乎没有帮助。我最终得到了下面的来源。

var numericTextBox = $(selector).data("kendoNumericTextBox");
    var element = numericTextBox.wrapper[0] ? numericTextBox.wrapper
            : numericTextBox.element;

    // unwrap element
    var input = numericTextBox.element.show();
    input.removeClass("k-input").css("width", "12.4em");
    input.removeClass("numerictextbox");
    input.insertBefore(numericTextBox.wrapper);

    numericTextBox.wrapper.remove();

    input.removeAttr("data-role");
    input.removeAttr("role");

我最终得到的文本框看起来像一个简单的文本框但我仍然不允许添加除了数字之外的任何东西。此外，我尝试添加行input.removeData（“kendoNumericTextBox”）;这与我上面发布的链接上的建议很接近，但我无法确定这条线的作用。

Answer 1

不是使用小部件装饰从文本转换为数字而反之亦然而是更容易同时使用它们并且始终隐藏其中一个。你只需要添加一个类/删除一个类并获得正确的类。

让我们说我有以下CSS定义：

.ob-hide {
    display: none;
}

以下HTML：

<div id="combobox"></div>
<div id="number"></div>
<div id="text"></div>

然后我的JavaScript将是：

$("#combobox").kendoDropDownList({
    dataSource: {
        data: [ "string", "number" ]
    },
    value     : "string",
    change    : function (e) {
        console.log("change");
        if (this.value() === "string") {
            console.log("string");
            $("#number").closest(".k-numerictextbox").addClass("ob-hide");
            $("#text").closest(".k-autocomplete").removeClass("ob-hide");
        } else {
            console.log("number");
            $("#number").closest(".k-numerictextbox").removeClass("ob-hide");
            $("#text").closest(".k-autocomplete").addClass("ob-hide");
        }
    }
});
$("#number").addClass("ob-hide").kendoNumericTextBox({});
$("#text").kendoAutoComplete({});

从文本框中删除NumericTextBox小部件

1 个答案: