Javascript 更好的输入和文本区域html水印机制

我使用它为html表单输入添加水印。我喜欢它，作为一个开发者，它真的很容易使用，并且使网站更容易被访问者使用。问题是，对于某些浏览器，人们提交的表单中的字段应该是空的。。。但他们得到提交的水印文本！这是一个绝对的破坏交易的问题，不幸的是，我不得不停止使用这个水印

是否有其他机制不表现出这种行为，至少在任何现代浏览器（包括IE6+）中没有？我更喜欢jQuery，但任何机制都可以。我认为javascript是必要的

更新：我想我会同意，除非有人知道更好的机制，或者这有什么问题？看起来很棒：

• 支持个性化css
• 支持html5的占位符属性作为回退机制，我不知道这一点
• 使用不允许向服务器提交水印的机制
• 有一种优雅的感觉，使水印随着焦点淡出，并且只在输入文本时移除

更新2：不幸的是，jq水印插件实际上根本无法正常工作。。。至少对我来说不是，我有一个相当标准的设置。可能与其他javascript存在冲突，但我对此表示怀疑。我真的很喜欢他们的功能集，尤其是html5的后备功能。事实上，我非常喜欢html5回退，以至于我很想忘记javascript机制，而只在html5浏览器上使用它。但就我所知，即使是firefox也没有html5功能，只有safari和chrome：（.这只占我访问者的10%左右

更新3：我终于能够让jq水印正常工作了。我不得不在它的类中添加一些CSS规则，并采用一些html约定（比如使用div容器而不是设置输入元素的宽度）。html5回退机制不起作用的原因是，我遇到了奇怪的行为，这是因为你不能依赖于自动将jq水印应用于类为jq_水印的所有元素，事实上，如果你想使用占位符属性，那么该类中的任何元素都是有害的。相反，你必须调用

$（选择器）.watermark（'placeholder text'，{fallback:true}）；

。有点糟糕，因为您必须在该调用和占位符属性上复制占位符文本。但是，当然，您可以使用jQuery的.each（）阅读该属性。另外，在firefox上，焦点淡出看起来有点糟糕……但是Firefox4将支持占位符html5，所以我不太担心。当聚焦于输入元素时，字体也会经常发生一些变化

---

浪费了好几个小时测试所有的解决方案，而且对于这样一个简单的机制的选择非常糟糕，这有点令人失望。jq水印，在调整它和您的html之后，可能是最好的解决方案。

不会改变输入字段的值。所以您应该可以安全地使用它。

我构建了一个真正的si对于这种排序方式，它并没有那么困难。它使用了占位符文本的

title

属性，但这很容易更改

(function($) {

    $.fn.egText = function(options) {
        options  = $.extend({ }, $.fn.egText.defaults, options || { });
        var $all = this;
        $all.focus(function() {
                var $this = $(this);
                if(!$this.data(options.dataKey))
                    $this.data(options.dataKey, 'yes').removeClass(options.egClass).val('');
            })
            .blur(function() {
                var $this = $(this);
                if($this.val() == '')
                    $this.addClass(options.egClass).removeData(options.dataKey).val($this.attr('title'));
                else
                    $this.data(options.dataKey, 'yes');
            })
            .blur();
        $.unique($all.closest('form')).submit(function() {
            $all.each(function() {
                var $this = $(this);
                if(!$this.data(options.dataKey))
                    $this.val('');
            });
            return true;
        });
    };

    $.fn.egText.defaults = {
        dataKey: 'egText',  // The key we use for storing our state with .data(), just in case there are conflicts...
        egClass: 'lolite'   // The CSS class to add to the <input> when we're displaying the example text.
    };

})(jQuery);

（函数（$）{
$.fn.egText=函数（选项）{
options=$.extend（{}，$.fn.egText.defaults，options{}）；
var$all=此值；
$all.focus（函数（）{
var$this=$（this）；
if（！$this.data（options.dataKey））
$this.data（options.dataKey，“yes”）.removeClass（options.egClass）.val（“”）；
})
.blur（函数（）{
var$this=$（this）；
如果（$this.val（）=''）
$this.addClass（options.egClass）.removeData（options.dataKey）.val（$this.attr（'title'））；
其他的
$this.data（options.dataKey，'yes'）；
})
.blur（）；
$.unique（$all.nexist（'form'））.submit（function（）{
$all.each（函数（）{
var$this=$（this）；
if（！$this.data（options.dataKey））
$this.val（“”）；
});
返回true；
});
};
$.fn.egText.defaults={
dataKey:'egText'，//我们使用.data（）存储状态的键，以防发生冲突。。。
egClass:'lolite'//显示示例文本时要添加到的CSS类。
};
})（jQuery）；

---

如果它能满足您的需要，欢迎您使用它。我不知道它在IE6中是否有效，但在最新的Firefox、Safari、Opera、Chrome、IE7和IE8中确实有效。

喜欢这个概念，谢谢！我不喜欢我不能为单个元素指定css类，它是一个全有或全无的应用程序。不太像jquery。而且，这也不太像在一年半后更新，评论中提到了重要的功能和bug，但没有得到回应。我将对此进行研究，并确保评论中提到的最后一个bug不会像will那样成为问题。你能更详细地描述什么对你不起作用吗？而且，实现这些功能也不难如果你愿意的话，我想这是jq水印的一部分——它当然不会有那么多功能，但基本的想法很简单。首先，我想，设计都搞砸了……我用firefox简要地看了一下，其中一个例子是，我有时需要浮动和/或调整输入元素的宽度。这对jq来说肯定会带来灾难性的后果-水印。但即使我将输入包含在一个div中，文本看起来也很有趣。#2，html5占位符的自动检测不起作用（是的，我将该选项设置为true）。添加jq水印也不会自动调用该插件（不重要，但似乎没有任何效果）