我正在使用下面的js脚本(来自http://blog.enriquez.me/2009/3/28/jquery-plugin-ezpz-hint/)并添加了hint.css('color','#999999');
部分,以便在不在焦点时使输入字段内的标签文本变灰。但是,我无法弄清楚的是如何在输入字段中将文本设置为黑色(#000)。任何人都可以解释代码应该放在哪里,下面? (或者,如果它应该是某种风格并添加到CSS中?)
(function($){
$.fn.ezpz_hint = function(options){
var defaults = {
hintClass: 'ezpz-hint',
hintName: 'ezpz_hint_dummy_input'
};
var settings = $.extend(defaults, options);
return this.each(function(i){
var id = settings.hintName + '_' + i;
var hint;
var dummy_input;
if ($(this).hasClass('select2-focusser') || $(this).hasClass('select2-input'))
{
return true; //skips to the next iteration for select2 inputs
}
// grab the input's placeholder attribute
text = $(this).attr('placeholder');
// create a dummy input and place it before the input
$('<input type="text" id="' + id + '" value="" />')
.insertBefore($(this));
// set the dummy input's attributes
hint = $(this).prev('input:first');
hint.attr('class', $(this).attr('class'));
hint.attr('size', $(this).attr('size'));
hint.attr('autocomplete', 'off');
hint.attr('tabIndex', $(this).attr('tabIndex'));
hint.addClass(settings.hintClass);
hint.val(text);
hint.css('color','#999999');
// hide the input
$(this).hide();
// don't allow autocomplete (sorry, no remember password)
$(this).attr('autocomplete', 'off');
// bind focus event on the dummy input to swap with the real input
hint.focus(function(){
dummy_input = $(this);
$(this).next('input:first').show();
$(this).next('input:first').focus();
$(this).next('input:first').unbind('blur').blur(function(){
if ($(this).val() == '') {
$(this).hide();
dummy_input.show();
}
});
$(this).hide();
});
// swap if there is a default value
if ($(this).val() != ''){
hint.focus();
hint.css('color','#000000');
};
});
};
})(jQuery);
谢谢!
答案 0 :(得分:0)
尝试将提示功能更改为此
hint.focus(function(){
dummy_input = $(this);
$(this).next('input:first').show();
$(this).next('input:first').focus();
$(this).next('input:first').unbind('blur').blur(function(){
if ($(this).val() == '') {
$(this).hide();
dummy_input.show();
}else{
dummy_input.css('color','#000000');
}
});
$(this).hide();
});
为什么不使用这个插件https://github.com/mathiasbynens/jquery-placeholder?这对我来说非常有用。