我的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
    }
});