0

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

水印文本等于“标题”属性，所以我可以做这样的事情，但我不想对我表单中的每个文本框都这样做：

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

理想情况下，这将是我的插件的一部分，当我调用 .val() 时它会返回一个空字符串关于如何执行此操作的任何建议？

4

3 回答 3

1

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

更新了 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();

​</p>

于 2012-08-09T20:43:20.727 回答
0

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

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

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

多谢你们！

于 2012-08-10T14:12:53.637 回答
0

尝试这样的方法：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();
});
于 2012-08-09T21:05:28.580 回答