我的CSS問題似乎無法弄清楚

Question

我似乎無法弄清楚這一點。 我在http://rayku.com/start上的網頁上有一個文本框，當有人開始輸入該文本框時，該文本框會展開下面的表格：

展開的形式http://snpr.cm/iurnmx.jpg

它的工作方式是，如果您在文本框中取消選擇而沒有鍵入任何內容，它將返回到其原始狀態。 但是，如果單擊窗體下方的任何內容，它將返回其原始狀態，這似乎工作得很好。

如何更改它，以便僅當我在文本框中未輸入任何內容且未單擊其下方的任何地方時，它才會返回到其原始狀態？

謝謝！

Answer 1

您需要在允許“關閉”動畫之前檢查字段的值。 像這樣：

//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
    }
});