取消焦点时的橙色轮廓突出显示

Question

取消焦点时的橙色轮廓突出显示

androidfocushighlightoutline

109

我正在使用jQuery、jqTouch和PhoneGap编写一个应用程序，并遇到了一个持续存在的问题，即当用户使用软键盘上的“Go”按钮提交表单时会出现问题。

虽然可以通过使用$('#input_element_id').focus()轻松使光标移动到适当的表单输入元素，但是橙色轮廓突出显示始终返回到表单上的最后一个输入元素。（当使用表单提交按钮提交表单时，不会显示突出显示。）

我需要找到一种方法，要么完全禁用橙色轮廓突出显示，要么使其移动到与光标相同的输入元素。

到目前为止，我已尝试将以下内容添加到我的CSS中：

.class_id:focus {
    outline: none;
}

这在Chrome上可以正常工作，但在模拟器或我的手机上却无法工作。我还尝试编辑jqTouch的theme.css文件如下：

ul li input[type="text"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
}

没有效果。我还尝试了将以下内容添加到AndroidManifest.xml文件中的每个选项：

android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"

这些都没有任何效果。

更新：我已经进行了更多的故障排除，目前为止发现：

outline属性仅在Chrome浏览器上有效，而不在Android浏览器上。
-webkit-tap-highlight-color属性实际上在Android浏览器上起作用，但在Chrome浏览器上不起作用。它禁用了聚焦和点击时的突出显示。
-webkit-focus-ring-color属性似乎在任何一个浏览器上都不起作用。

- eggdeng

16个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roberto Andrade · Answer 1

这对于图片区域链接对我来说没有效果，唯一有效的解决方案是使用JavaScript来捕获ontouchend事件，并通过在处理程序上返回false来防止默认浏览器行为。

使用jQuery：

$("map area").on("touchend", function() {
   return false;
});

- abksharma · Answer 2

这不仅适用于触摸操作，悬停操作也同样有效：

button, button:hover, li:hover, a:hover , li , a , *:hover, * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

- Ashoka Mondal · Answer 3

我已经尝试过这个，正常运行：-

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);
}

- Android · Answer 4

<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />

- Robert Richter · Answer 5

如果设计没有使用轮廓，那么这个应该可以胜任：

*, *::active, *::focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
    -webkit-focus-ring-color: rgba(0, 0, 0, 0)!important;
    outline: none!important;
}

- Rinkesh · Answer 6

尝试以下代码以禁用边框轮廓：

outline: none !important;