Html-IOS下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;}
 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

原文鏈接:http://www.cnblogs.com/leona-d/p/5950280.html 

版權聲明:本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM