テキストボックス内のヒント用の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);