Question

我创建了一个简单的jquery插件，如果字段为空（文本框的水印），则将“灰色”文本放入文本框中。问题是当我提交表单并且我试图获取文本框的值时，它将返回水印文本而不是空字段。

水印文本等于“title”属性，所以我可以做这样的事情，但我讨厌在我的表单中为每个文本框执行此操作：

if ($("#textboxid").val() == $("#textboxid").attr("title")) {
  //default, return empty string
} else {
  //user entered this
}

理想情况下，这将是我的插件的一部分，当我调用.val（）时它会返回一个空字符串有关如何做到这一点的任何建议吗？

Answer 1

对于我制作的定制水印/占位符插件，我有这样的东西。我只是处理它onclick（表单的提交按钮），然后遍历所有内容。

Updated jsFiddle DEMO

(function ($, window, document, undefined) {

    $.fn.myCustomVal = function () {
        return $(this).each(function () {
            var _self      = $(this),
                _watermark = _self.attr('title');

            _self.attr('data-watermark', 'on');
            _self.val(_self.attr('title'));

            _self.on('focus', function () {
                $(this).val('');
            });
            _self.on('blur', function () {
                $(this).val(_watermark);
            });
        });            
    };

    $(function () {
        // change this class here to whatever you want
        $('.btnSubmit').on('click', function () {
            $('input:text[data-watermark]').each(function () {
                if ($(this).val() == $(this).attr("title")) {
                    $(this).val('');
                }
            });

            // now validate / submit / whatnot
            alert('submitted!');
        });
    });

}(jQuery, window, document));

// ************************
// Initiate plugin
$('input:text').myCustomVal();

Answer 2

尝试这样的方法：http://jsfiddle.net/aVhMh/3/

逻辑也不是很通用：如果用户想输入准确的水印值，那么你的插件就没用了。我知道这是一个非常不太可能的情况，但考虑到这一点会更优雅。

$("input[type=text]").addClass("watermark");
$("input[type=text]").each(function() {
    $(this).val($(this).attr("title"));
});

$("input[type=text]").on("focus", function() {
    if ($(this).hasClass("watermark")) {
        $(this).removeClass("watermark").val("");
    }
});
$("input[type=text]").on("blur", function() {
    if ($(this).val() == "") {
        $(this).val($(this).attr("title")).addClass("watermark");
    }
});
$("form").on("submit", function() {
    $("input[type=text].watermark").val("");
    $(this).submit();
});

Answer 3

我接受了mcpDesigns的答案，因为它让我走上了正确的道路，但并不是我想要的。我最终在插件中添加以下内容以创建一个名为“ActualVal（）”的函数，该函数返回正确的值：

        $.fn.ActualVal = function () {
            if (this.val() == this.attr(opts.attrName)) {
                return "";
            } else {
                return this.val();
            }
        }

因此，当使用val（）获取值时，我使用.ActualVal（）获取值。比围绕特定按钮编码更清洁和动态=）

谢谢你们！

自定义jQuery插件返回val（）

3 个答案: