文本输入水印使用自定义bindingHandler

Question

我一直在尝试创建一个自定义的bindingHandler,我可以使用它来为文本输入字段赋予水印行为.

通过watermark我的意思是:添加默认值到文本中的焦点移除,并在模糊替代领域如果文本字段仍然是空的

我已经设法让这个工作正如在这个jsfiddle中所证明的那样:http://jsfiddle.net/rpallas/nvxuw/

我有3个关于此解决方案的问题:

1. 有没有办法改变它,所以我只需要声明一次水印值？目前我必须将它放在我声明绑定的地方,我还必须在viewModel中使用相同的值初始化observable - 否则它将没有初始值.
2. 是否有更好的方法来获取元素值绑定的基础observable.我目前正在使用allBindingsAccessor抓住它,但这对我来说是错误的.最初我只是使用jquery设置值,$(element).val('')但这也感觉不对.哪个最好,还是有更好的方法？
3. 有没有人知道或知道这个问题的现有解决方案？我是在重新发明轮子吗？

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/

希望这可以帮助.