javascript - 修改 CSS/JS 以保持扩展

Question

我已经研究我们的问题表单一段时间了，但我不知道如何调整它的效果。 http://rayku.com/start

http://rayku.com/ss/2012-02-23_03-26-56.png

真正烦人的是，如果我不在问题框中输入任何内容，然后单击其下方表单上的任何内容，它就会返回到其原始折叠状态。

你知道我如何修改 CSS 或 JS 以便它只有在我点击组合表单区域之外时才会折叠吗

当问题字段中没有输入文本时？

谢谢!

Answer 1

我认为你应该改变:

mainQuestion.focus(function(){

到

mainQuestion.keyup(function(){

这样您就可以确保此人输入了问题，如果他们没有输入您可以隐藏表单。

编辑

将您的代码更改为:

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

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

mainQuestion.keyup(function(){
    //animate opening here
    $('#register-form').stop().animate({top:"-130px"},1000);
    $('#register-block').slideDown();
});

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
        $('#register-form').stop().animate({top:"0px"},500);
        $('#register-block').slideUp(); 
    }
});