[英]Issue with my CSS that I can't seem to figure out
I can't seem to figure this one out. 我似乎无法弄清楚这一点。 My web page at http://rayku.com/start has a text box that will expand a form below it when someone starts to type in it:
我在http://rayku.com/start上的网页上有一个文本框,当有人开始输入该文本框时,该文本框会展开下面的表格:
expanded form http://snpr.cm/iurnmx.jpg 展开的形式http://snpr.cm/iurnmx.jpg
How it should work is that if you de-select from the text box without typing anything, it would go back to its original state. 它的工作方式是,如果您在文本框中取消选择而没有键入任何内容,它将返回到其原始状态。 However, it seems to be working too well that if I click anything on the form itself below it, it would return to its original state.
但是,如果单击窗体下方的任何内容,它将返回其原始状态,这似乎工作得很好。
How do I change it so that it will only go back to its original state if I don't type anything in the text box and I don't click anywhere on the form below it? 如何更改它,以便仅当我在文本框中未输入任何内容且未单击其下方的任何地方时,它才会返回到其原始状态?
Thanks! 谢谢!
You need to check the value of the field before allowing a 'close' animation. 您需要在允许“关闭”动画之前检查字段的值。 Something like this:
像这样:
//store object in var for efficiency
var mainQuestion = $('.main-question input');
var initialValue = mainQuestion.val();
mainQuestion.focus(function(){
//blank out field on focus
if(mainQuestion.val() == initialValue){
mainQuestion.val('');
}
//animate opening here
});
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
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.