Question

我正在尝试实现类似StackOverflow的水印功能。

我正在使用jquery-watermark。我遇到的问题是水印文本随着输入元素获得焦点而消失，这在SO中不会发生（我也不想在我的实现中使用它）

我可以为此做一些快速解决方案，或者是一个更像SO的水印库吗？

Answer 1

我猜你的意思是只要没有输入输入就会将PlaceHolder文本渲染到输入字段中。并且你希望它只在用户输入一些文本后才会消失，而不是一旦他聚焦了这个领域？

a）我不鼓励这样做。我目前正在玩一个JSFiddle来实现它并且它不是那么微不足道。而且还有现代浏览器将为您提供的HTML5 Placeholder attribute“本机”提供此功能..

b）这有点棘手。但显示相关代码的here is the JSFiddle。

这里是小提琴的代码：

$("#item")
    .addClass("watermark")
    .val("Watermark")
    .data('wm', true)
    .focus(function () {
        if ($(this).data('wm') === true) {
            var that = this;
            setTimeout(function () {
                that.setSelectionRange(0,0);
            }, 50);
        }
    })
    .keydown(function (evt) {
        if ($(this).data('wm') === true) {
            $(this).val($(this).val().replace('Watermark', ''));
            $(this).data('wm', false);
            $(this).removeClass('watermark');
        }       
    })
    .blur(function () {
        if ($(this).val().length === 0) {
            console.log("ran change");
            $(this)
                .addClass("watermark")
                .val("Watermark")
                .data('wm', true);

        }
    });

我很确定代码仍然可以改进，也许可以放入它自己的jQuery插件..还要注意我没有测试它是否适用于IE ..（并且Js仍然有一些硬编码值）

Answer 2

我为另一个问题写了this JSFiddle，但效果很好。它的作用是尽可能无缝地为HTML5 placeholder属性提供jQuery回退。当水印文本存在时，它甚至可以完成整个“较轻的文本”。希望它能解决你的问题。

来自小提琴的代码：

$(document).ready(function() {
    $("input:text").each(function() {
        $(this).data("placeholder", $(this).attr("placeholder")).addClass("placeholder");
    });

    $("input:text").live("focus", function() {
        if($(this).val() == $(this).data("placeholder"))
        {
            $(this).val('').removeClass("placeholder");
        }
    });

    $("input:text").live("blur", function() {
        if(!$(this).val().length)
        {
            $(this).val($(this).data("placeholder")).addClass("placeholder");
        }
    });
});

Answer 3

这里使用的方法非常狡猾。文本不会消失的原因是因为它实际上不是input元素的一部分。输入字段后面有span，span包含占位符文本。占位符文本的“调暗”效果是通过操纵输入元素的不透明度来实现的。

当输入字段模糊且为空时，其不透明度为40％。（占位符跨度显示相当不错。）
当输入字段聚焦且为空时，它的不透明度为~60％。（占位符跨度隐约显示。）
当输入字段保存数据时，其不透明度为100％。（占位符范围根本不显示。）

就个人而言，我赞成使用Tigraine描述的placeholder属性的方法。 ~~即使HTML5没有最终确定，我更喜欢这个有一个单独的元素来保存文本。（严格说来是关于客户端HTML。）~~ 第二个想法，它确实降级得很好......

jQuery水印StackOverflow喜欢？

3 个答案: