在Android 4.1.2上的Phonegap 3.0应用程序中无法完全摆脱点按高亮颜色

时间:2013-09-19 12:03:29

标签: android css cordova android-webview

在Android 4.1.2上点击Phonegap 3.0应用中的元素时,我完全摆脱了可怕的高光。

当点击一些元素时,我首先在tapped元素下获得一个橙色(在这种情况下)突出显示,但后来快速连续的父元素(或另一个祖先元素,不确定哪个)显示一个亮点!

我知道点击突出显示可以被setting a transparent color“禁用”:

* {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
}

这实际上适用于我的应用中的大多数可点击元素,但在某些元素上,父/祖先元素仍然获得一个亮点!我创建了一个 demo ,它显示了我正在测试的设备上的外观(三星Galaxy S3)。是啊,没错。我正在使用jsfiddle作为动画工具: - )

我已经尝试了另一个线程中讨论的所有内容:Disable orange outline highlight on focus

由于点击突出显示实际上在使用上述css规则轻敲的所有元素上消失,我开始怀疑这个次要的较大高亮显示除了点按之外的其他内容。但是我试图将css规则扩展为适用于*:hover, *:active, *:focus但没有成功。

我还尝试在css之外和Android应用程序本身中解决问题。 WebSettings中的第一个setLightTouchEnabled()看起来很有希望,但是A)它没有用,B)从API级别18开始,它已经过时,没有效果。

我真的很茫然。任何帮助都会非常感激。

6 个答案:

答案 0 :(得分:5)

这是你需要的。

web kit tap color

最后浏览视频。会告诉你它是否正确。 :)

这是git hub项目

github

答案 1 :(得分:2)

您应该能够摆脱这些轮廓和边界,并将'outline'属性添加到现有的CSS中:

* {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
   outline: 0; 

}

可选地,为每一行添加!important,因为显然phonegap也有一些默认样式。

答案 2 :(得分:1)

在你的情况下试试这个,

-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 

将此处的alpha值设置为零应该使其“不可见”。

还有更多行可以使它正常工作,

请参阅更新后的fiddle

中的课程.link
.link {
    display: block;
    padding: 5px;
    border-style:none; 
    outline-style:none; 
    -webkit-appearance: textarea;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    -webkit-tap-highlight-color: transparent;
}

其他事情保持不变..

此外,如果(特别是iPhone)我看到你从事件中返回。

preventDefault中的jQuery相同,因此在phoneGap中也可以使用,因为它也是基于JS的框架。

<a class="link"
  href="javascript:void(0);"
  ontouchstart="return true;"></a>

我认为这样做,如果没有完成,请尝试回复..

答案 3 :(得分:1)

CSS方面:

  * {
 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
:focus {
    outline: 0;
    border: none;
    color: rgba(255, 255, 255, 0);
}
div {
-webkit-appearance:none;
}

我发现在用户端,进入设置 - &gt;辅助功能 - &gt;安装网页脚本并将其更改为“不允许”会停止显示超链接周围的突出显示。 (see screenshot)

不幸的是,我无法访问phonegap,因此我无法重现您的实际情况。

答案 4 :(得分:1)

你可以尝试一下,

* {
   -webkit-tap-highlight-color:  rgba(255, 255, 255, 0) !important; 
   -webkit-user-modify: read-write-plaintext-only;
}

这样可以删除您点击的高亮颜色。

答案 5 :(得分:0)

我在一篇可能也非常有趣的帖子中发现了这一点,因为您可以根据需要编辑CSS:

<强> HTML

<a class="html5logo"
  href="javascript:void(0);"
  ontouchstart="return true;"></a>

<强> CSS

.html5logo {
 display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

http://phonegap-tips.com/demos/webkit-tap-highlight-color.html

或者如果你想要幻想: https://material.google.com/motion/choreography.html#choreography-creation