我希望文本框的值字段中的文本在该文本框获得焦点时消失,然后重新出现以响应最终的模糊事件 - 但仅当值为空时(即,如果用户)将焦点放入文本框后没有输入任何内容)。到目前为止,我有这个:
this.each(function() {
obj = $(this);
var initialText = obj.val();
obj.focus(function () {
if(obj.val() === initialText)
obj.val("");
});
obj.blur(function () {
if(obj.val() ==="")
obj.val(initialText);
});
});
如果页面中只有一个元素,则此插件可以正常工作。 如果我有两个元素,那么它不起作用。为什么会这样?
答案 0 :(得分:2)
obj变量没有作用于函数,它是全局范围的,所以只有其中一个 - 设置为插件应用的最后一个。使用var
关键字将变量范围仅限于匿名函数,以便插件应用于每个事物。
答案 1 :(得分:0)
您需要从代码实现中单独编写插件。
你的插件看起来像这样:
(function($) {
$.fn.watermark = function() {
return this.each(function() {
var obj = $(this);
var initialText = obj.val();
obj.focus(function () {
if(obj.val() === initialText)
obj.val("");
});
obj.blur(function () {
if(obj.val() ==="")
obj.val(initialText);
});
});
};
})(jQuery);
然后使用你的插件:
$(document).ready(function() {
$('.watermark').watermark();
});
此外,作为tvanfosson,您需要在var
上添加obj
关键字。如果您的var
声明中没有obj
关键字,则只有最后一个文本框会产生水印效果。