validate + listener +向下滑动面板

时间:2010-12-07 22:25:13

标签: javascript jquery jquery-effects

我们只有两个表单元素。 他们是为了数字。如果numebrs匹配(使用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"
            }
        }
    });
});   

滑块,似乎是我们可以使用的众多不同版本,通过jQuery想到切换和滑动。

我的问题是我希望事件监听器从第二个输入字段触发滑块面板。无需用户在任何其他地方点击任何内容。

因此,当它们进入第二个输入字段时......匹配时,“实时”滑块打开。

任何帮助表示感谢。

好的戴维斯帮助,这是我到目前为止所做的:

验证:

$(document).ready(function(){
    $("#bugmeform").validate({
        rules: {
            mobile1: "required",
            mobile2: {
                equalTo: "#mobile1"
            }
        }
    });
});

下面提到的jQuery Handler代码

$("#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”/&GT;

移动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”/&GT;

我希望动画的Div元素:

<div class="clearfix"></div>
<div id="slider">
你好世界     &LT; / div&gt;

就此而言。

1 个答案:

答案 0 :(得分:1)

可能是这样的:

$('#secondInput').keyup(
    function(){
        if ($('#firstInput').val() == $('#secondInput').val()) {
            $('#slider').animate({/* slide into view */}, 500);
        }
    });