0

フィールドが空白の場合に「グレー表示」されたテキストをテキストボックスに入れる単純なjqueryプラグインを作成しました（テキストボックスの透かし）。問題は、フォームを送信してテキストボックスの値を取得しようとすると、空のフィールドではなく透かしのテキストが返されることです。

透かしのテキストは「title」属性と等しいので、このようなことを行うことができますが、フォームのすべてのテキストボックスに対してこれを行うのは嫌です。

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

Ideally, this would be part of my plugin and it would return an empty string when i call .val() Any suggestions on how to do this?

4

3 に答える 3

1

私が作ったカスタムメイドの透かし/プレースホルダープラグインには、このようなものがあります。私はそれをonclick（フォームの送信ボタン）で処理してから、すべてをループします。

jsFiddleデモを更新

(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

次のようなアプローチを試してください：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 に答える
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 に答える