В нашем мобильном веб-приложении есть несколько кнопок ввода с цветом фона по умолчанию, красным.Теперь при касании кнопки мы хотим изменить цвет на синий, чтобы показать некоторую активность.Кнопка должна оставаться в активном цвете фона до тех пор, пока не будет завершена предполагаемая функция нажатия кнопки.Как только функция onclick завершена, цвет фона меняется на красный по умолчанию.
Я попробовал пару решений для реализации вышеуказанного поведения.Но ничего из этого не работает должным образом.
1) Поскольку в мобильных браузерах (iphone & android) нет события onmouseover, я использую событие onclick для изменения цвета кнопки.
<input type="button" id="validate" class="redButton" value="Validate" onclick="handleOnClick(this);"/>;
function handleOnClick() {
changeColor('blue');
doSomething();
changeColor('red');
}
В идеале, когда пользователь нажимает кнопку, вызывается функция handleOnClick () и цвет фона первой кнопки должен измениться на синий, затем он должен вызвать doSomething () и, наконец, изменить цвет на красный.В действительности doSomething () выполняется так быстро, что изменение цвета кнопки не видно пользователю и остается красным.Прежде чем браузер сможет изменить класс и применить новые CSS-стили changeColor («синий»), он вызывает changeColor («красный»).
2) Я попробовал событие "ontouchstart", чтобы изменить цвет фона.Но проблема с этим подходом состоит в том, что, как только вы нажмете кнопку, а затем отведете палец от кнопки, он по-прежнему будет запускаться при касании, но не при нажатии кнопки.
Есть ли другой способ изменить цвет кнопки для мобильных браузеров?Спасибо.