Change button background color on click in mobile web app
In our mobile web app, we have some input buttons with default background color set to Red. Now on touch of the button, we want to change the color to Blue to show some activity. The button should remain in active background color as long as the intended onclick function of the button is finished. Once the onclick function is finished, the background color is changed back to default Red.
I tried couple of solutions to implement above behavior. But none of it works as expected.
1) Since there is no onmouseover event in mobile browsers (iphone & android), I use onclick event to change the button color.
<input type="button" id="validate" class="redButton" value="Validate" onclick="handleOnClick(this);"/>;
function handleOnClick() {
changeColor('blue');
doSomething();
changeColor('red');
}
Ideally, when user clicks on button, handleOnClick() function is called and first button background color should change to Blue, then it should call doSomething() and finally it should change color back to Red. In reality, doSomething() is executed so quickly that button color change is not visible to user and it remains red. Before browser can change the class and apply new CSS styles of changeColor('blue'), it calls changeColor('red').
2) I tried "ontouchstart" event to change the background color. But problem with this approach is that once you touch the button and then move the finger away from the button, it still fires ontouchstart but not onclick event.
Is there any other way I can change the color of the button for mobile browsers? Thank you.
Finally after spending too much time, I solved the button highlight problem with help from below links:
上一篇: document.body.style.backgroundImage不能正常工作
下一篇: 在移动网络应用程序中单击更改按钮背景颜色