問題描述:
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <style> 8 input { width: 100px; height: 25px; background-color: #ff6a00; outline:none;} 9 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*/} 10 </style> 11 </head> 12 <body> 13 <input type="button" value="刷 新" /> 14 </body> 15 </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原生寫法
1 document.body.addEventListener("touchstart", function () { //空函數即可});
jq寫法
1 $('body').on("touchstart",function(){ //空函數即可});
當然了,有的時候,這還不足以解決問題,有時你還需要這樣寫
1 $(function () { $('input').on("touchstart", function () { //空函數即可}); });
等到頁面加載完成后,在執行激活綁定事件,而且往往有的時候你必須在input上添加才會有效,具體是什么原因我還沒有研究清楚。
正確寫法:
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <style> 8 input { width: 100px; height: 25px; background-color: #ff6a00; outline:none; -webkit-appearance: none; } 9 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*/} 10 </style> 11 </head> 12 <body> 13 <input type="button" value="刷 新" /> 14 <script> 15 document.body.addEventListener("touchstart", function () { 16 17 }); 18 19 //或 20 $('input').on("touchstart", function () { }); 21 22 23 24 //或 25 $(function () { 26 $('input').on("touchstart", function () { }); 27 }); 28 29 30 </script> 31 </body> 32 </html>
作者:leona
版權聲明:本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接