0
<style>
    html,
    body {
        margin: 0px;
        min-height: 100%;
        min-width: 100%;
        position: absolute;
    }
    ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    li {
        display: none;
        padding: 5px;
    }
</style>
<script type="text/javascript">
    $(function () {
        $("ul li:first").show();
        $('#username').keydown(function (event) {
            var username = $(this).val();
            if (event.keyCode == 13) {
                $(this).hide().next();
                $("li").next("li#password").slideDown({
                    duration: 'slow'
                });
            }
        });
        $('#password').keydown(function entsub(event, ourform) {
            if (event && event.which == 13) {
                ourform.submit();
            }
        });

    })
</script>
<div class="reset-shown" id="email-row">
    <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
        <ul>
            <li id="username">
                <label for="email">Username:</label>
                <input id="username1" name="name" type="text"/>
                <div id="com">Please enter your username</div>
            </li>
            <li id="password">
                <label for="email">Password:</label>
                <input id="password1" name="name" onkeypress="return entsub(event,this.form)" type="text"/>
                <div id="com">Please enter your password</div>
            </li>
            <li class="submit">
                <input id="submit" type="submit" value=" Register "/>
            </li>
        </ul>
    </form>
</div>

В мозиле все работает, есть первое поле ввода, заполняешь его, нажимаешь Enter, появляется второе "password", заполняешь, нажимаешь Enter - данные отправляются! В chrome они никуда не отправляются( В чем может быть дело?

1 ответ 1

3

А зачем такие сложности?

Во первых, нужно учитывать что JavaScript в браузере может быть отключенным. Поэтому display: none в стилях - плохой вариант. Юзер без JavaScript залогиниться не сможет.

Во вторых, стоит знать что, по умолчанию, enter в <input>-полях формы автоматически сабмитит эту форму.

Поэтому, достаточно такого кода:

​j​Query(function($){
    $('#pass').hide();
    $('#user')
        .focus()
        .keydown(function( event ){
            if( event.keyCode==13 ){
                $('#pass').show('false').focus();
                return false;// не даст сделать автосабмит
            }
        });
})​;​

Пример

5
  • Да но, мне нужно чтоб в место login появлялся password. И всегда видно одно поле! И чтоб не было видно кнопки. Такие условия=(
    – zinteco
    Commented 28 сент. 2012 в 10:28
  • Тогда так: jQuery(function($){ $('#user').focus() .keydown(function( event ){ if( event.keyCode==13 ){ $(this).hide(); $('#pass').show().focus(); return false; } }); $('#pass').hide() .keydown(function( event ){ if( event.keyCode==13 ){ $(this).submit(); return false; } }); });​
    – KiTE
    Commented 28 сент. 2012 в 11:58
  • 1
    Если юзер отключил JS, его проблемы. А таких очень мало. Если он отключил, значит понимает что почем, и включит.
    – forum3
    Commented 28 сент. 2012 в 13:30
  • @forum3, бесспорно. Но не стоит забывать о правилах хорошего тона - кодить так, чтобы при любых обстоятельствах было доступно максимум функционала.
    – KiTE
    Commented 28 сент. 2012 в 13:36
  • Ну в принципе правильно, я так и сделал, когда есть ява, будет работать как задумано, когда её нет будет обычная форма=) Но есть еще проблема, я хотел чтоб кнопка всегда была скрыта!!!! добавил $('#submit') .hide(); В мозиле все работает а хром все равно отвергает на последнем этапе=(((
    – zinteco
    Commented 28 сент. 2012 в 18:37

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.