Как убрать анимацию нажатия кнопки Javascript

195
12 декабря 2018, 02:50

Кнопка реализована при помощи Bootstrap классов.

<form>
    <input type="submit" class="btn btn-info btn-lg">
</form>

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

Также есть скрипт, который добавляет class active и таким образом после нажатия делает анимацию прожатой кнопки.

В итоге при нажатии кнопка очень быстро прожимается и отжимается, а затем прожимается.

Можно ли добавить style, который уберет это мерцание(моментальное прожатие/отжатие) ? Или уберет только отжатие, и тогда скрипт и вовсе не нужен. Спасибо.

update привожу некий общий каркас, передающий суть задачи

<form method="get" action="/tasks">
                <input type="submit" class="btn btn-info btn-lg" name="column" value="A" onclick="clickFunction(this)">
                <input type="submit" class="btn btn-info btn-lg" name="column" value="B" onclick="clickFunction(this)">
                <input type="submit" class="btn btn-info btn-lg" name="column" value="C" onclick="clickFunction(this)">
</form>
<form method="post" action="/tasks">
     <table>
          <c:forEach var="task" items="${tasks}" varStatus="status">
                    <tr>
                        <td>${status.count}</td>
                        <td>${task.content}</td>
                    </tr>
          </c:forEach>
     </table>
     <input type="submit" name="operation" value="DoSomething">
     <input type="submit" name="operation" value="DoSomethingOther">               
</form>

Кроме того скрипты:

<script>
    var btn = document.querySelector("input[name='column'][value='${column}']");
    if (btn)
        btn.classList.add("active");
</script>
<script>
    function clickFunction(btn) {
        btn.classList.add("active");
    }
</script>

Есть три кнопки: A,B,C. По нажатию прилетает список tasks GET запросом. Этот список находится в form с другими кнопками для манипуляций с ней методом POST. После манипуляций при помощи sendRedirect() свою работу выполняет метод GET(column хранится в сессии, соотственно что хранится то и отрисовывает).

update style

А также в head:

<style>
        .active{
            border-style: inset;
        }
</style>

И .active c пометкой never used. Возможно потому, что в bootstrap также есть class active который можно добавить к кнопке.

Answer 1

А где стиль active?

Теперь остается выяснить в какой момент Вы видите ненажатую кнопку. Из вопроса - это может быть момент, когда браузер, распарсив кусок

<form method="get" action="/tasks">
  <input type="submit" class="btn btn-info btn-lg" name="column" value="A" onclick="clickFunction(this)">
  <input type="submit" class="btn btn-info btn-lg" name="column" value="B" onclick="clickFunction(this)">
  <input type="submit" class="btn btn-info btn-lg" name="column" value="C" onclick="clickFunction(this)">
</form>

отрисовывает эту часть страницы до того, как дойдет до скрипта и до стиля.

Вставьте

<style> 
.active { border-style: inset; }
</style>

в head, a в кнопках

<input type="submit" class="btn btn-info btn-lg ${ if(column == "A") { "active" } }" name="column" value="A" onclick="clickFunction(this)">
  • не знаю как в маркапе пишется вывод чего-то в html по какому-либо условию.

Update

оnclick="ClickFunction(this)" нужен, чтобы кнопка выглядела нажатой в тот промежуток времени, пока мы отправляем форму и ждем ответа от сервера, - браузер в это время продолжает показывать старую страницу. Скрипт, добавляющий класс во время загрузки страницы, нужен, чтобы кнопка выглядела нажатой на странице, пришедшей с сервера после отправки формы, то есть на новой странице.

READ ALSO
Горизонтальное меню: Ширина иконок

Горизонтальное меню: Ширина иконок

Хочу создать аналогичное меню с иконками от fontawesome Сделал я все через divЕдинственная проблема которая у меня создалась это ширина каждого...

170
блок прыгает при загрузке

блок прыгает при загрузке

Помогите найти причину того, что блок при загрузке на мобильной версии прыгаетСначала он влево, а потом перемещается в центр

165
Плавный скроллинг к якорю со слешем

Плавный скроллинг к якорю со слешем

У меня возникла следующая проблема: не могу настроить плавный скроллинг к якорю со слешемУ меня сайт состоит из двух страниц, три пункта меню...

138
SVG градиент на внутренних страницах и тег BASE

SVG градиент на внутренних страницах и тег BASE

Есть svg градиент, который применяется на всех страницах сайта:

209