0

テキストボックス内のヒント用のjQueryプラグインに取り組んでいます。これまでのところ、問題なく動作しています。ただし、元のヒントを持つテキスト ボックスに対して「すべて削除」メソッドを実装する必要があります。

これを行う唯一の方法は、ループして値をタイトルと比較することです。

$('input').each(function() {
  if ($(this).prop('title') == $(this).val()) {
    $(this).val('');
  }
});

ただし、これの問題は、タイトルに基づいてヒントを設定するか、オプションでオーバーライドする機能を提供していることです。だから..私はタイトルに頼りたくない.

質問: 要素を特定のデータにリンクする組み込みの jQuery メカニズムはありますか、それとも別の解決策がありますか?

これが私の現在のコードです:

(function ($) {
    var settings = {
        normColor: '#000000',
        hintColor: '#808080',
        hint: ''
    };

    var methods = {
        init: function (options) {
            var $this = $(this);

            // try to set original text color of input
            settings.normColor = $this.css('color');

            // set hint to the title
            settings.hint = $this.prop('title'); 

            // merge default settings with user provided options
            // we need to supply a blank array as the first
            // argument so the default settings are not overwritten
            settings = $.extend({}, settings, options);

            return this.each(function () {
                $this.css('color', settings.hintColor);
                $this.val(settings.hint);

                // begin on focus
                $this.on('focus', function () {
                    if ($this.val() == settings.hint) { // if what's entered is NOT the hint
                        $this.val('');

                        // return to normal color
                        $this.css('color', settings.normColor);
                    }
                }); // end on focus

                // begin on blur
                $this.on('blur', function () {
                    if ($this.val().length == 0 || $this.val() == msg) {
                        $this.val(settings.hint);
                        $this.css('color', settings.hintColor);
                    }
                }); // end on blur
            });
        },
        remove: function () {
            return this.each(function () {
                alert('remove');
            });
        },
        removeAll: function() {
            return this.each(function () {
                alert('remove all');
            });
        }
    };

    /// begin main function
    $.fn.hint = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.hint');
        }
    };
})(jQuery);
4

0 に答える 0