使用自定义绑定处理程序输入文本水印

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

By watermark我的意思是：向文本字段添加默认值，这些默认值在焦点时被删除，如果文本字段仍然为空，则在模糊时被替换

我已经设法让它工作，如 jsfiddle 中所示：http://jsfiddle.net/rpallas/nvxuw/ http://jsfiddle.net/rpallas/nvxuw/

我对此解决方案有 3 个疑问：

1. 有什么方法可以更改它，以便我只需声明一次水印值？目前，我必须将其放在声明绑定的位置，并且还必须在 viewModel 中使用相同的值初始化可观察值 - 否则它将没有初始值。
2. 是否有更好的方法来获取元素值所绑定的底层可观察值。我目前正在使用 allBindingsAccessor 来获取它，但这对我来说感觉不对。最初我只是使用 jquery 设置值$(element).val('')但这也感觉不对。哪个最好，或者有更好的方法吗？
3. 有谁知道或知道这个问题的现有解决方案吗？我是在重新发明轮子吗？

我认为您使用所有绑定是不必要的。事实上，我认为水印根本不需要知道可观察的东西，因为这就是水印通常所做的事情，即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/ http://jsfiddle.net/madcapnmckay/Q5yME/1/

希望这可以帮助。