Question

我正在使用jquery.watermark为html表单输入添加水印。我喜欢它，非常容易作为开发人员使用，并使网站更容易用于访问者。问题是，对于某些浏览器，人们正在提交带有应该留空的字段的表单......但是他们会使用水印文本提交！这是一个绝对的交易破坏者问题，我不得不因此而不得不停止使用这个水印。

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

更新：我想我会选择jq-watermark，除非有人知道更好的机制或者这有什么问题吗？它看起来很棒：

支持个性化的CSS
支持html5的占位符属性作为后备机制，我不知道
使用不允许向服务器提交水印的机制
具有优雅的感觉，使焦点淡化水印，仅在输入文字时删除

更新2 ：不幸的是，看起来像jq-watermark插件实际上根本不能正常工作......至少对我而言并不是很漂亮标准设置。也许与其他javascript存在冲突，但我对此表示怀疑。我非常喜欢他们的功能集，特别是html5后备。事实上，我非常喜欢html5的后备，以至于我很想忘掉这个javascript机制，只有这个才能用于html5浏览器。但是即使firefox还没有这个html5功能，只有我可以看到的safari和chrome :(。这只是我访问者的10％左右......

更新3 ：我终于能够让jq-watermark运行良好。我必须在其类中添加一些CSS规则并采用一些html约定（比如使用div容器而不是在输入元素上设置宽度）。 html5回退机制不工作的原因是我遇到奇怪的行为是你不能依赖jq-watermark自动应用于所有带有类jq_watermark的元素，事实上它对于拥有该类的任何元素都是有害的如果要使用占位符属性。相反，你必须致电$(selectors).watermark('placeholder text', {fallback:true});。有点糟糕，因为你必须复制该调用和占位符属性中的占位符文本。但是，当然，您可以使用jQuery的.each（）来读取该属性。此外，在Firefox上，重点淡化看起来有点糟糕......但Firefox 4将支持占位符html5，所以我不太担心。当关注输入元素时，字体会经常变化。

有点令人失望的是浪费了几个小时来测试那里的所有解决方案并且对这样一个简单的机制有一个相当糟糕的选择。 jq-watermark在调整它和你的html后，可能是最好的解决方案。

Answer 1

我为这种东西构建了一个非常简单的jQuery插件，并不难。这使用占位符文本的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);

如果满足您的需求，欢迎您使用。我不知道它是否适用于IE6，但它适用于最新的Firefox，Safari，Opera，Chrome，IE7和IE8。

Answer 2

This jQuery Watermark plugin不会改变输入字段的值。所以你应该安全地使用它。

更好的html水印机制输入和textareas

2 个答案: