проверить + слушатель + сдвинуть панель - PullRequest
Новая
       2

проверить + слушатель + сдвинуть панель

0 голосов
/ 08 декабря 2010

У нас есть только два элемента формы. Они для чисел. Если числа совпадают (используя 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.

Моя проблема в том, что я хочу, чтобы прослушиватель событий запускал панель ползунка из 2-го поля ввода. Без необходимости нажимать что-либо еще в любом месте.

Таким образом, когда они входят во 2-е поле ввода ... как только оно совпадает, "живой" слайдер открывается.

Любая помощь приветствуется.

Хорошо, с Davids Help, вот что у меня есть:

Проверка: 

$(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);"
* 1 033 * 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">

Привет, мир

Вот и все.

1 Ответ

1 голос
/ 08 декабря 2010

Возможно что-то вроде: 

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