优化这段JavaScript代码

Question

我想知道如果有一种方法，使这个代码更高效请，我想提高我自己的代码，但我觉得我需要的反馈，这个部分：

$(function(){ 
    $('#buscar').focus(function(){ 
     if(($(this).val() === '') || ($(this).val() === ' ') || ($(this).val() === 'Buscar...')) 
      $(this).val(''); 
    }).change(function(){ 
     if(($(this).val() === '') || ($(this).val() === ' ') || ($(this).val() === 'Buscar...')) 
      $(this).css({'color':'#999999'}); 
     else 
      $(this).css({'color':'#000000'}); 
    }).blur(function(){ 
     if(($(this).val() === '') || ($(this).val() === ' ')) 
      $(this).val('Buscar...'); 
    }); 
}); 

Answer 1

/* ========================================================== 
* speed and readable improvment 
* ========================================================== */ 
$(function(){ 
    $('#buscar') 
     .bind('focus change blur', function(){ 
      var $this = $(this); 
      if(event.type === 'focus' || event.type === 'change') 
      $this 
       .iff($this.isEdited('Buscar...')) 
       .val('') 
       .end(); 
      else if(event.type === 'blur') 
      $this 
       .iff($this.isEdited(null)) 
       .val('Buscar...') 
       .end(); 
     }); 
}); 

(function($){ 
    '$:nomunge'; // Used by YUI compressor. 

    $.fn.iff = function(test) { 
    var elems = !test || $.isFunction(test) 
     && !test.apply(this, Array.prototype.slice.call(arguments, 1)) 
     ? [] 
     : this; 
    return this.pushStack(elems, 'iff', test); 
    }; 

})(jQuery); 

$.fn.isEdited = function(placeholder) { 
    if(typeof placeholder !== 'string') 
     placeholder = ''; 

    var val = $(this).val(); 
    return $.trim(val) === '' || val === placeholder; 
}; 

编辑：重写代码从“磨憨拉姆”（多个事件绑定） 备注添加爱迪尔： 您可以使用此代码还没有“IIF” -extension如果你喜欢。 那么你必须写：

if((event.type === 'focus' || event.type === 'change') && $this.isEdited('Buscar...')) 

Answer 2

我会去下面的代码。它隔离您需要的功能（测试空字符串，或测试没有值或占位符文本）。另外，我不认为change功能是改变颜色的正确位置;相反，它应该在focus和blur函数中，您也可以更改该值。另外，如果您只是为输入字段查找占位符方法，那么您已经为您设置了许多文本和CSS样式。而且，HTML 5为此具有placeholder属性 - 请参见http://davidwalsh.name/html5-placeholder。一些更好的占位符插件甚至使用HTML 5，如果它不受支持，则会回退到JS。

总之，这里是代码：

$.fn.isValBlank = function() { 
    return $.trim($(this).val()) == ""; 
}; 

$.fn.isInputBlank = function() { 
    return (($(this).isValBlank() || ($(this).val() === 'Buscar...')); 
}; 

$(function(){ 
    $('#buscar').focus(function(){ 
     var val = $(this).val(); 
     if ($(this).isInputBlank()) { 
      $(this).val(''); 
      $(this).css({'color':'#000'}); 
     } 
    }); 

    $('#buscar').blur(function(){ 
     if ($(this).isValBlank()) { 
      $(this).css({'color':'#999'}); 
      $(this).val('Buscar...'); 
     } 
    }); 
}); 

Answer 3

如果它是未来，HTML5是无处不在，或者如果大家使用的Safari，Chrome和Firefox浏览器目前唯一的版本，那么你可以敲出来的大部分该代码以及与此替换：

<input name="something" id="buscar" placeholder="Buscar..."> 

但是，因为在写这篇文章的，它仍然是现在，你可以让事情变得有点像这样：

function isEdited(el,placeholder){ 
    placeholder = typeof placeholder == 'undefined' ? 'Buscar...' : placeholder; 
    return $.trim($(el).val()) === placeholder; 
} 

$('#buscar').focus(function(){ 
    if(isEdited(this)) 
     $(this).val(''); 
}).change(function(){ 
    if(isEdited(this)) 
     $(this).css({'color':'#999999'}); 
    else 
     $(this).css({'color':'#000000'}); 
}).blur(function(){ 
    if($.trim($(this).val())) 
     $(this).val('Buscar...'); 
}); 

如果你需要做很多这个，你可以考虑jQuery Placeholder Plug-in。它使用placeholder属性，因此它对HTML5友好。

此外，

Answer 4

有额外的知识，感谢@ deceze的见解，我建议分解出大多数这种逻辑到一个单一的功能。基本上所有这些条件都在检查字段是否为空。

此外，我添加了任何类型的空白检查，因为单个" "就像两个空间" "一样无关紧要。

function isTextFieldEmpty(text, placeholder) { 
    var onlyWhitespace = /^\s+$/; 
    return (text == "" || onlyWhitespace.test(text) || text == placeholder); 
} 

然后你可以重用此功能适用于所有的事件 - focus，blur，change。

$(function() { 

    // to avoid repeating this text everywhere.. 
    var placeholder = 'Buscar...'; 

    $('#buscar').focus(function() { 
     if (isTextFieldEmpty(this.value, placeholder)) { 
      $(this).val(''); 
     } 
    }); 

    $('#buscar').blur(function() { 
     if (isTextFieldEmpty(this.value, placeholder)) { 
      $(this).val(placeholder); 
     } 
    }); 

    $('#buscar').change(function() { 
     if (isTextFieldEmpty(this.value, placeholder)) { 
      $(this).css({ color: '#999' }); 
     } 
     else { 
      $(this).css({ color: '#000' }); 
     } 
    }); 

}); 

Answer 5

HTML由JavaScript访问input elements have a defaultValue财产。在讨论占位符文本输入值时，可以使用它来帮助使代码更加可重用。这不是完美的任何手段，但...

$(function(){ 

    $("input[type='text']").focus(textInputFocusHandler).change(textInputChangeHandler).blur(textInputBlurHandler); 

}); 

function hasUserValue(textInput) { 
    return (textInput.value!=textInput.defaultValue && /^\s+$/.test(textInput.value)==false && textInput.value!==""); 
} 

function textInputFocusHandler(event) { 
    if(!hasUserValue(event.target)) event.target.value = ""; 
} 

function textInputChangeHandler(event) { 
    if(!hasUserValue(event.target)) event.target.style.color = "#999"; 
    else event.target.style.color = "#000"; 
} 

function textInputBlurHandler(event) { 
    if(!hasUserValue(event.target)) event.target.value = event.target.defaultValue; 
} 

Answer 6

我觉得这是写你的代码优化的方式

$(function(){ 
    $('#buscar').bind('focus change blur' , function(){ 
    //write ur codes here 
}); 

Answer 7

快速优化的最简单方法：

$(function(){ 
$('#buscar').focus(function(){ 
    var t = $(this); 
     var v = $.trim(t.val()); 
if(v === '' || 'Buscar...'){ 
    $(this).val(''); 
     } 
}).change(function(){ 
    var t = $(this); 
     var v = $.trim(t.val()); 
(v === '' || 'Buscar...' ? t.css({'color':'#999999'}) : t.css({'color':'#000000'})) 
}).blur(function(){ 
    var t = $(this); 
     var v = $.trim(t.val()); 
    if(v === '') 
     t.val('Buscar...'); 
}); 
});