優化這段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...'); 
}); 
});