我们只有两个表单元素。他们是为了数字。如果数字匹配(使用 validate ),那么我想要一个滑动面板( div )打开。
没有锚按钮或链接。
我发现的问题是在第二场比赛成功后触发面板向下滑动。我不希望用户点击远离第二个输入字段,而是监听事件匹配,成功然后显示 div。
如果它们不匹配或用户更改输入,则 div 将关闭。
...................所以这里有一些代码。
<input id="mobile1" name="mobile1">
<input id="mobile2" name="mobile2">
验证:
$(document).ready(function(){
$("#form").validate({
rules: {
mobile1: "required",
mobile2: {
equalTo: "#mobile1"
}
}
});
});
Slider 似乎是我们可以使用的多种不同版本,通过 jQuery 切换和滑动都可以想到。
我的问题是我希望事件侦听器从第二个输入字段触发滑块面板。无需用户在其他任何地方单击任何内容。
因此,当他们输入第二个输入字段时..一旦匹配,“实时”滑块就会打开。
任何帮助表示赞赏。
好的,Davids Help,这就是我到目前为止所拥有的:
验证:
$(document).ready(function(){
$("#bugmeform").validate({
rules: {
mobile1: "required",
mobile2: {
equalTo: "#mobile1"
}
}
});
});
下面提到的 jQuery 处理程序代码
$("#mobile2").bind('keyup', "paste", function () {
if ($("#mobile1").val() == $("#mobile2").val()) {
$("#slider").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500);
});
表单元素看起来像:移动 1
<input id="mobile1" name="mobile1" class="small" size="12" type="text" onkeydown="return ( event.ctrlKey || event.altKey
|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
|| (95<event.keyCode && event.keyCode<106)
|| (event.keyCode==8) || (event.keyCode==9)
|| (event.keyCode>34 && event.keyCode<40)
|| (event.keyCode==46) )"
class="medium" onKeyPress="return numbersonly(event, false)" onKeyDown="limitText(this.form.mobile1,this.form,10);"
onKeyUp="limitText(this.form.mobile1,this.form,10);" maxlength="10"/>
手机 2
<input id="mobile2" name="mobile2" class="small" size="12" type="text" onkeydown="return ( event.ctrlKey || event.altKey
|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
|| (95<event.keyCode && event.keyCode<106)
|| (event.keyCode==8) || (event.keyCode==9)
|| (event.keyCode>34 && event.keyCode<40)
|| (event.keyCode==46) )"
class="medium" onKeyPress="return numbersonly(event, false)" onKeyDown="limitText(this.form.mobile2,this.form,10);"
onKeyUp="limitText(this.form.mobile2,this.form,10);" maxlength="10"/>
我希望动画的 div 元素:
<div class="clearfix"></div>
<div id="slider">
你好世界</div>
就是这样。