javascript - 我似乎无法弄清楚我的 CSS 问题

Question

我似乎无法弄清楚这一点。我的网页在 http://rayku.com/start有一个文本框，当有人开始输入时，它会展开下面的表格:

expanded form 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
    }
});