JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-5-14 11:45:15

问题描述：

 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

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

Html-IOS下input的样式添加不上的解决方案