CSS/JSを拡張したままにするように修正する

Question

私はしばらくの間、私たちの質問フォームで遊んでいましたが、その効果を微調整する方法がわかりません。 http://rayku.com/start

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

本当に迷惑何かが、私は質問ボックスに何も入力しないでください、と私はそれ以下のフォーム上で何かをクリックした場合、それは元の折り畳まれた状態になりますということです。

あなたが質問で入力されたテキストがありませんが、私は組み合わせた形領域の外側

をクリックすると、それだけで崩壊するように、私はCSSやJSを変更する方法を知っていますフィールド？

ありがとうございます！

Answer 1

私は、変更すべきだと思う：

mainQuestion.keyup(function(){ 

へ

mainQuestion.focus(function(){ 

ので、あなたは人が疑問に入っていると、彼らはドン場合は、フォームを非表示にすることができていることを確認してください」 t。

EDIT

変更あなたのコードはに：

//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()イベントの同じ機能を#register-block-fieldsというイベントで実行して、最終的にボックスが消えるようにする必要があります。