LINUX.ORG.RU

вопрос по html\css


0

1

Прошу помочь, есть две проблемы:

1. Есть такая форма из триттер бутстрап

<div class="btn-group pull-right">
                
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="icon-user"></i> Вход
                        <span class="caret"></span>
                    </a>
                    <div class="dropdown-menu dropdown" style="padding: 15px; padding-bottom: 0px;">
                        <form class="loginForm" action="/login" method="post" accept-charset="UTF-8">
                            <label class="string optional" for="user_username">Имя пользователя</label>
                            <input id="user_username" style="margin-bottom: 15px;" type="text" name="username" size="30" />
                            <label class="string optional" for="user_password">Пароль</label>
                            <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
                            <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Логин" />
                        </form>
                    </div>            
            </div>
Проблема с ней в том, что когда логин\паролль введешь, нужно кликнуть отдельно по Логин мышью, либо нажать TAB, а потом Space или Enter. Как сделать, чтобы после ввода пароля можно было просто нажать Enter и форма бы отправилась?

2. В том же твиттер бутстрап есть меню наверху в панели

<div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="index.html#main">Main</a></li>
              <li><a href="index.html#test1">test1</a></li>
              <li><a href="index.html#test2">test2</a></li>
              <li><a href="index.html#test3">test3</a></li>
              <li><a href="index.html#test4">test4</a></li>
            </ul>
          </div><!--/.nav-collapse -->
Все пять якорей из гиперссылок находятся на одной странице. Вопрос - как при клике на test2, например, переместить class=«active» на эту ссылку, чтобы она была выделена? Плохо знаю JS, может быть им можно как-то отследить переход пользователя по якорю? или средствами css сделать, если возможно..

Заранее спасибо!


На CSS классы не поменять

xorik ★★★★★
()

Как сделать, чтобы после ввода пароля можно было просто нажать Enter и форма бы отправилась?

Она и так должна отправляться. Что за браузер у тебя?

как при клике на test2, например, переместить class=«active» на эту ссылку

$(".nav a").click(function() {
  $(".nav li").removeClass("active");
  $(this).parent().addClass("active");
});
Apple-ch ★★
()

Первое итак должно работать, посмотри скрипты, может там обработка нажатий кривая или какая нибудь шибко вумная.

Насчёт второго покури псевдокласс :target, или тупо вешай обработчик на клик.

Kalashnikov ★★★
()
Ответ на: комментарий от Kalashnikov

Она и так должна отправляться. Что за браузер у тебя?

IE9, не работает отправка, под другими не пробовал

JS

Понял, спасибо, код попробую сейчас прикрутить

покури псевдокласс :target

нашел по теме http://www.w3.org/TR/css3-selectors/#target-pseudo , но я не понимаю, как он может мне помочь. Можно иллюстрацию на примере? Решение на CSS все же получше будет чем JS на клиенте

Хотя может и разницы нет - там весь бутстрап на яваскриптах :D

Cargo
() автор топика
Ответ на: комментарий от Apple-ch

Она и так должна отправляться. Что за браузер у тебя?

сфигали? пока обработчик не напишешь на кейдаун - ниего не будет происходить.

JFreeM ★★★☆
()
Ответ на: комментарий от JFreeM

Я так понимаю, обработчик на нажатие кнопки нельзя вешать. там кнопка Вход, если она не нажата - форма для логина и пароля не открыта вниз. поэтому если просто на странице нажать Enter, форма отправится и вылетит сообщение, что логин\пароль неправильный. слишком глобально.

а мне нужно, чтобы если пользователь нажал Вход, потом написал логин и пароль, и находясь в поле пароль нажал Enter - форма отправилась бы. только в этом случае. Это возможно?

Cargo
() автор топика
Ответ на: комментарий от Cargo

находясь в поле пароль нажал Enter - форма отправилась бы. только в этом случае. Это возможно?

на поле пароль и вешайте обработчик

JFreeM ★★★☆
()
Ответ на: комментарий от JFreeM

Насколько я помню, по спекам браузер должен отправлять форму по энтеру в input type=«text». А проблема скорее всего в

IE9, не работает отправка, под другими не пробовал

Kalashnikov ★★★
()
Ответ на: комментарий от Kalashnikov

по спекам браузер должен отправлять форму по энтеру в input type=«text»

первый раз слышу. И не надо валить все на ИЕ. 9 уже более-менее юзабельна и работает как надо.

JFreeM ★★★☆
()
Ответ на: комментарий от JFreeM

пока обработчик не напишешь на кейдаун - ниего не будет происходить

А вы каким браузером пользуетесь милейший? Упражнение: отключи JS и попробуй загуглить что-нибудь на глагне гугла, вводя какую-нибудь чушь и нажимая энтер вместо клика по кнопке.

Повтори в разных браузерах и удивись.

Apple-ch ★★
()
Ответ на: комментарий от JFreeM

Не совсем так как я помню, но нашёл разжёванное объяснение. А на осла всегда свалить можно, как хорошо бы он ни разивался, он по-прежнему осёл.

Тупой пример: http://jsfiddle.net/BQJFh/ Работает как надо в опере, хромиуме и айсвизиле. Ие нет под рукой чтоб проверить.

Kalashnikov ★★★
()
Ответ на: комментарий от xpahos

да-да, я уже увидел что все обрамлено в тег форм. Просто сто лет его не использовал, вот и отвык.

JFreeM ★★★☆
()
Ответ на: комментарий от JFreeM

первый раз слышу. И не надо валить все на ИЕ. 9 уже более-менее юзабельна и работает как надо.

Хотя бы прочитал/проверил бы, прежде чем спорить.

P.S. Так и есть: браузер должен сабмитить форму при нажатии [enter] в текстовом поле ввода без всяких js и работать должно даже в IE.

Boba_Fett
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.