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

Question

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

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

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

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

1. 有什么办法可以改变它，让我只需要声明一次水印值吗？目前我必须把它放在我声明绑定的地方，我还必须用viewModel 中的值相同 - 否则它将没有初始值。
2. 有没有更好的方法来获取元素值绑定到的底层可观察对象。我目前正在使用 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/

希望这会有所帮助。

Answer 2

只要您的应用程序逻辑非常简单，前面的方法就可以了，请注意解决方案会弄乱您的视图模型的值，这些值可以是可观察的，并且它们可以具有与之关联的订阅或计算，因此更改您更改视图模型的值。这是一个不同的解决方案，无需更新您的视图模型

ko.bindingHandlers.fakePlaceHolderWhenNeedIt = {
    init: function (element, valueAccessor, allBindings, vm) {
     if (!Modernizr.input.placeholder) {
        var placeHolderVal = $(element).attr("placeholder");

        if (placeHolderVal != null || placeHolderVal != '') {

            var $element = $(element);
            var value = valueAccessor()
            var valueUnwrapped = ko.utils.unwrapObservable(value);


            $element.keyup(function () {
                var inputValue = $(this).val();
                var $watermark = $(this).prev('.ie-placeholder');
                if (inputValue == null || inputValue == '') {
                    $watermark.show();
                }
                else {
                    $watermark.hide();
                }
            });

            var display = valueUnwrapped != null || valueUnwrapped != '' ? "block" : "none";
            var left = $element.position().left;
            var top = $element.position().top;
            var paddingLeft = $element.css('padding-left');
            var paddingRight = $element.css('padding-right');
            var paddingTop = $element.css('padding-top');
            var paddingBottom = $element.css('padding-bottom');

            var height = $element.css('height');
            var placeHolder = '<div class="ie-placeholder" style="position:absolute;left:' + left + ';top:' + top + ';padding-top: ' + paddingTop + ';padding-bottom: ' + paddingBottom + ';padding-left: ' + paddingLeft + ';padding-right: ' + paddingRight + ';height: ' + height + ';line-height:' + height + ';display:' + display + ';">' + placeHolderVal + '</div>';

            $(placeHolder).click(function () { $element.focus(); }).insertBefore(element);
        }
    }
},
update: function (element, valueAccessor, allBindings, vm) {
    if (!Modernizr.input.placeholder) {
        var placeHolderVal = $(element).attr("placeholder");

        if (placeHolderVal != null || placeHolderVal != '') {
            var $element = $(element);
            var value = valueAccessor()
            var valueUnwrapped = ko.utils.unwrapObservable(value);

            var $watermark = $element.prev('.ie-placeholder');
            if (valueUnwrapped == null || valueUnwrapped == '') {
                $watermark.show();
            }
            else {
                $watermark.hide();
            }
        }
    }
}