我一直在玩我们的问题表格一段时间,并且无法弄清楚如何调整其效果。 http://rayku.com/start
http://rayku.com/ss/2012-02-23_03-26-56.png
真令人烦恼的是,如果我没有在问题框中输入任何内容,并点击其下方表单上的任何内容,它将返回其原始折叠状态。
你知道如何修改CSS或JS,只有当我点击组合表格区域之外它才会崩溃
什么时候没有在问题栏中输入的文字?
谢谢!
答案 0 :(得分:2)
我认为你应该改变:
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();
}
});
答案 1 :(得分:0)
设置一个变量来测试鼠标是否悬停在表单上。
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
}
});
答案 2 :(得分:0)
我建议改变这个:
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}}事件上运行相同的功能,以便最终将框消失。