使用自定义bindingHandler文本输入水印(text input watermark usi

我一直在试图创建一个我可以用它来给水印行为文本输入字段的自定义bindingHandler。

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

我设法得到尽可能在这个的jsfiddle证明了这一点的工作： http://jsfiddle.net/rpallas/nvxuw/

我对这个解决3个问题：

有没有办法改变它，这样我只需要声明一次水印值？ 目前，我不得不把它放在哪里，我宣布的结合，我也必须初始化观察到，在视图模型的值相同的地方 - 因为它，否则将没有初始值。
有没有让底层观察到的元素值绑定到一个更好的方式。 目前，我正在抓住它使用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/

希望这可以帮助。

Answer 2:

以前的做法是罚款，只要你的应用程序的逻辑非常简单，要知道，解决方案与您的视图模型的价值观搞乱，这些值可以观测，他们可以有订阅或computeds联想到它，所以通过改变值你改变你的视图模型。这是不更新您的视图模型不同的解决方案

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();
            }
        }
    }
}

文章来源: text input watermark using custom bindingHandler