修改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(); 
    }
});

Answer 2

设置一个变量来测试鼠标是否悬停在表单上。

 var isOverForm = false;

 $('#myformWrap').hover(function(){
     isOverForm = (!isOverForm);
 });

 isTextBlank = //test if input is empty or initial value script

 $('body').click(function(){

       if(!isOverForm && isTextBlank){
              //hide form script
       }

 });

Answer 3

我建议改变这个：

mainQuestion.blur(function(){
    //check to see if user has typed anything in
    if((mainQuestion.val() == initialValue) || !mainQuestion.val().length ){
        //reset value
        mainQuestion.val('Start typing your question here');
        //animate closing here
        $('#register-form').animate({top:"0px"},1000);
        $('#register-block').slideUp(); 
    }
});

这样的事情

mainQuestion.blur(function(){
    // check to see if any of the other text boxes are focussed
    var focTF = $('#register-block-fields input:focus');
    if(focTF.length > 0){
      //check to see if user has typed anything in
      if((mainQuestion.val() == initialValue) || !mainQuestion.val().length ){
          //reset value
          mainQuestion.val('Start typing your question here');
          //animate closing here
        $('#register-form').animate({top:"0px"},1000);
        $('#register-block').slideUp(); 
      }
    }
});

如果聚焦另一个文本框，那将确保它不会关闭。但是，您可能还必须在.blur()的{​​{1}}事件上运行相同的功能，以便最终将框消失。