问题描述:
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
input { width: 100px; height: 25px; background-color: #ff6a00; outline:none;}
input:active{ background-color:#00ff21; transform: translate(2px,2px); -webkit-transform: translate(2px,2px); /*Google*/ -moz-transform: translate(2px,2px); /*Safari*/ -webkit-transform: translate(2px,2px); /*op*/}
</style>
</head>
<body>
<input type="button" value="刷 新" />
</body>
</html>
问题代码如上,input的css样式添加失效
(touch的样式active样式添加同样失效)
原因:
1、IOS默认给input添加的样式,我们的样式被覆盖了
2、IOS下input自己手动需激活active状态,否则active是不会起作用的
解决方法:
1、css给input添加: -webkit-appearance: none;【这个是为了去除IOS默认的input样式】
2、手动激活active状态,给body/html或元素上绑定touchstart事件:
js原生写法
document.body.addEventListener("touchstart", function () { //空函数即可});
jq写法
$('body').on("touchstart",function(){ //空函数即可});
当然了,有的时候,这还不足以解决问题,有时你还需要这样写
$(function () { $('input').on("touchstart", function () { //空函数即可}); });
等到页面加载完成后,在执行激活绑定事件,而且往往有的时候你必须在input上添加才会有效,具体是什么原因我还没有研究清楚。
正确写法:
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
input { width: 100px; height: 25px; background-color: #ff6a00; outline:none; -webkit-appearance: none; }
input:active{ background-color:#00ff21; transform: translate(2px,2px); -webkit-transform: translate(2px,2px); /*Google*/ -moz-transform: translate(2px,2px); /*Safari*/ -webkit-transform: translate(2px,2px); /*op*/}
</style>
</head>
<body>
<input type="button" value="刷 新" />
<script>
document.body.addEventListener("touchstart", function () { }); //或
$('input').on("touchstart", function () { }); //或
$(function () {
$('input').on("touchstart", function () { });
}); </script>
</body>
</html>
作者:leona
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接