knockout.js - 使用自定义 bindingHandler 的文本输入水印

Question

我一直在尝试创建一个自定义 bindingHandler，我可以使用它来为文本输入字段提供水印行为。

作者 watermark我的意思是:将默认值添加到在焦点上删除的文本字段中，如果文本字段仍然为空，则在模糊时替换

我已经设法让它像这个jsfiddle所示的那样工作:http://jsfiddle.net/rpallas/nvxuw/

我对此解决方案有 3 个问题:

有什么办法可以改变它，让我只需要声明一次水印值吗？ 目前我必须把它放在我声明绑定(bind)的地方，并且我还必须在 viewModel 中用相同的值初始化 observable——否则它将没有初始值。

有没有更好的方法来获取元素值绑定(bind)到的底层 observable。 我目前正在使用 allBindingsAccessor 来获取它，但这对我来说感觉不对。最初我只是使用 jquery $(element).val('') 设置值但这也感觉不对。哪个最好，或者有更好的方法吗？

有没有人有或知道这个问题的现有解决方案？ 我在重新发明轮子吗？

Answer 1

我认为你使用 allbindings 是不必要的。事实上，我认为水印根本不需要知道可观察的，因为这就是水印通常所做的，即 placeholder属性。

这对你有用吗？

ko.bindingHandlers.watermark = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor(), allBindings = allBindingsAccessor();
        var defaultWatermark = ko.utils.unwrapObservable(value);
        var $element = $(element);

        setTimeout(function() {
            $element.val(defaultWatermark);}, 0);

        $element.focus(
            function () {
                if ($element.val() === defaultWatermark) {
                    $element.val("");
                }
            }).blur(function () {
                if ($element.val() === '') {
                    $element.val(defaultWatermark)
                }
            });
    }
};

http://jsfiddle.net/madcapnmckay/Q5yME/1/

希望这可以帮助。