修改CSS/JS以保持扩展
修改CSS/JS以保持扩展
提问于 2012-02-23 16:31:15
我已经玩了一段时间的问题表单了，我不知道如何调整它的效果。http://rayku.com/start
http://rayku.com/ss/2012-02-23_03-26-56.png
真正恼人的是，如果我没有在问题框中键入任何内容，而我在它下面的表单上单击了任何内容，它就会返回到它最初的折叠状态。
您知道如何修改CSS或JS，使其仅在单击组合窗体区域外时才会折叠
而在问题字段中没有键入任何文本？
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-02-23 16:42:08
我认为你应该改变：
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();
}
});Stack Overflow用户
发布于 2012-02-23 16:38:53
设置一个变量来测试鼠标是否悬停在窗体上。
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
}
});Stack Overflow用户
发布于 2012-02-23 16:57:27
我建议改变这一点：
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();
}
}
});这将确保当另一个文本框被聚焦时，它不会关闭。但是，您可能还必须在#register-block-fields的.blur()事件上运行相同的函数，这样盒子最终才会消失。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9409478
复制相关文章
相似问题
腾讯云开发者
