移除Android应用程序周围的绿色边框

Question

我目前遇到一个问题，一款使用Cordova构建的Android应用程序，在应用程序主体周围有一个绿色边框：

这似乎是由于Web容器处于焦点状态导致的，因为当弹出警报时，绿色轮廓会消失。

这个绿色边框不会出现在应用程序的iOS版本中，也不会在浏览器中或使用chrome://inspect检查模拟器框架时出现。

我尝试了多种CSS修复方法来尝试移除此边框，例如：

* {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  border: 0px solid #000;
}

除了在设备上禁用所有无障碍设置，但都没有效果。

其他细节：

• Android SDK版本：27
• 已测试的设备：Nexus 5、Nexus 6、Pixel XL
• Cordova版本：3.6.4（由于当前框架要求使用MobileFirst，无法更改）

有人知道如何解决这个问题吗？

- blacktide

Answer 1

在您的

Android / App / src / main / res / values / styles.xml

在样式标签内添加此项，保留原有标签不变

<item name="android:defaultFocusHighlightEnabled">false</item>

- Manojvirat457

Answer 2

我通过在CordovaLib/src/org/apache/cordova/下的CordovaWebView Java类的init方法中添加以下行来解决此问题:

this.setDefaultFocusHighlightEnabled(false);

- blacktide

---

这对我有用，但我想知道是否有更好/适当的解决方案？ - Sterling Bourne

这个页面说这个设置在Android Oreo/8.0中变得相关。 如果你认为保持布局xml文件中的视觉变化是正确的做法，而不是你已经做过的方式，你可以在布局xml文件中进行更改。https://developer.android.com/about/versions/oreo/android-8.0-changes.html - byronaltice

在 Cordova Android 8.0.0 中，我不得不在 CordovaWebViewImpl.java 的 init 方法中添加以下行： engine.getView().setDefaultFocusHighlightEnabled(false); - Thomas

Answer 3

这是因为在 Cordova webview 中 isInTouchMode 是 true（仅适用于 Oreo 版本）。

解决方案

• 前往 CordovaLib/src/org/apache/cordova/CordovaActivity.java

• 找到 appView.getView().requestFocusFromTouch();

• 将上述行替换为以下内容：

  if (Build.VERSION.SDK_INT < 26) {
      appView.getView().requestFocusFromTouch();
  }
  

- Vinoth K

Answer 4

1. 移除 Android 平台

2. 添加此项

<item name="android:defaultFocusHighlightEnabled">false</item>

在下面这两个文件中

\node_modules\cordova-android\spec\fixtures\android_studio_project\app\src\main\res\values\styles.xml

并且

\node_modules\cordova-android\test\app\src\main\res\values\styles.xml

3. 添加 Android 平台

- khayam