2012-02-10 111 views
0

我似乎無法找出這一個。在http://rayku.com/start我的網頁上有一個文本框,將擴大它下面的表單時,有人開始在裏面輸入:問題與我的CSS,我似乎無法弄清楚

expanded form http://snpr.cm/iurnmx.jpg

它應該如何工作是,如果你從文本框取消選擇,而無需輸入任何事情都會回到原來的狀態。然而,它似乎工作得很好,如果我點擊下面的表單上的任何東西,它就會恢復到原來的狀態。

如何改變它,以便它只會回到原來的狀態,如果我沒有在文本框中輸入任何內容,並且我不在下面的表單上點擊任何地方?

謝謝!

回答

3

您需要在允許「關閉」動畫之前檢查該字段的值。這樣的事情:

//store object in var for efficiency 
var mainQuestion = $('.main-question input'); 
var initialValue = mainQuestion.val(); 

mainQuestion.focus(function(){ 
    //blank out field on focus 
    if(mainQuestion.val() == initialValue){ 
     mainQuestion.val(''); 
    } 
    //animate opening here 
}); 

mainQuestion.blur(function(){ 
    //check to see if user has typed anything in 
    if((mainQuestion.val() == initialValue) || !mainQuestion.val().length){ 
     //reset value 
     mainQuestion.val(initialValue); 
     //animate closing here 
    } 
}); 
+1

我注意到你在表單元素上使用內聯js來清除初始文本並重置它。不要這樣做,或者html中的任何js,它的惡業。 – Fresheyeball 2012-02-10 07:32:27

+0

謝謝!我做了改變,它似乎很好!雖然現在如果我在文本字段中輸入某些內容,請選擇其他內容,然後再次單擊文本字段,我鍵入的文本消失。有關如何防止這種情況的任何想法? – Donny 2012-02-10 09:12:09

+0

我將編輯 – Fresheyeball 2012-02-10 16:04:16

相關問題