Question

我正在尝试创建自定义绑定以在文本输入中显示提示文本。

到目前为止，我有这个，但它不起作用：

ko.bindingHandlers.hintText= {
    init: function (element, valueAccessor) {
        element.focus(function () {
            if ($(this).val() === defaultText) {
                $(this).attr("value", "");
            }
        });
        element.blur(function () {
            if ($(this).val() === '') {
                $(this).val(valueAccessor());
            }
        });
    }
}

html：

<input id="profileID" type="text" data-bind="hintText:'Enter Profile ID'" />

Answer 1

HTML5 placeholder属性应该为您完成此任务。

如果您的浏览器要求支持placeholder属性，则可以使用KnockOutJS'attr绑定直接调用它：

<input data-bind="attr:{placeholder: hintText}">

如果您需要支持旧版浏览器，那么应该有适合您的垫片：https://github.com/parndt/jquery-html5-placeholder-shim

要使用此填充程序，您需要创建自定义绑定，以便在占位符更改时根据需要手动调用$.placeholder.shim();。

这是一个应用垫片的“占位符”绑定（已编辑）：

ko.bindingHandlers.placeholder = {
    init: function (element, valueAccessor) {
        var placeholderValue = valueAccessor();
        ko.applyBindingsToNode(element, { attr: { placeholder: placeholderValue} } );
    },
    update: function(element, valueAccessor){
        $.placeholder.shim();
    }
};

您的HTML将如下所示：

<input data-bind="placeholder: hintText">

如何创建一个淘汰提示文本自定义绑定？

1 个答案: