javascript - jQuery 水印 StackOverflow 之类的？

Question

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

我正在使用 jquery-watermark为了这。我遇到的问题是水印文本随着输入元素获得焦点而消失，这在 SO 中不会发生(我也不希望在我的实现中出现)

我可以为此做一些快速修复，或者更像 SO 的水印库吗？

Answer 1

我猜你的意思是只要没有输入就呈现到输入字段中的 PlaceHolder 文本。您希望它仅在用户输入一些文本后消失，而不是在他聚焦该字段后消失？

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

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

这里是 fiddle 的代码:

$("#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 仍然有一些硬编码值)