2012-10-19 432 views
0

我正在使用一個標籤淡入淡出當用戶輸入文本到輸入/ textarea。它到目前爲止運行良好,但我無法找出一個好方法來檢查輸入/ textarea是否在加載時具有現有值,因此我可以自動隱藏標籤。使用jquery時檢查空輸入/ textarea。()

輸入/ textareas正在使用.load()加載,這就是爲什麼我使用$(document),而不是直接定義選擇器。

這裏是一個例子,顯示我試圖克服的問題。任何幫助將不勝感激。此外,如果您有任何建議,我可以將此功能封裝到插件/功能中,這將非常有用。謝謝!

http://jsfiddle.net/skyros/FTXc3/

和僞代碼,如果你不想去的jsfiddle

//JQUERY 
$(document).on('click', 'label', function() { 
    $(this).next().focus(); 
}); 

$(document).on('focus', 'input,textarea', function() { 
    var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) : $(this).prev('label').fadeTo(100, 0).hide(); 
}); 

$(document).on('blur', 'input,textarea', function() { 
    var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 1) : $(this).prev('label').fadeTo(100, 0).hide(); 
}); 

$(document).on('keypress', 'input, textarea', function() { 
    var label = $(this).prev('label').hide(); 
});​ 

回答

1

一種方法是使用過濾函數來獲取長度> 0元素然後隱藏標籤

$(function(){ // on dom ready 
    $('label').filter(function(){ 
     // return labels that have siblings with input val > 0 
     return $.trim($(this).siblings('input[type=text]').val()).length > 0; 
    }).hide(); // hide those labels that are returned 
    // or do whatever you want to do with those labels here 
}); 

http://jsfiddle.net/wirey00/XwGa6/

+0

這正是我一直在尋找。我將其修改爲在.load()上激發一個函數。謝謝! – Skyros

0

我會改變:

$(document).on('focus', 'input,textarea', function() { 
    var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) :  $(this).prev('label').fadeTo(100, 0).hide(); 
}); 

function input_textarea_focussed() { 
    var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) :  $(this).prev('label').fadeTo(100, 0).hide(); 
}; 
$(document).on('focus', 'input,textarea', input_textarea_focussed()); 

,然後添加

$(document).on('load', function() { 
    $("input, textarea").each(input_textarea_focussed); 
});