android - 禁用焦点上的橙色轮廓突出显示

Question

我正在使用 jQuery、jqTouch 和 phonegap 编写应用程序，并且遇到了一个持久性问题，当用户使用软键盘上的 Go 按钮提交表单时会出现该问题。

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

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

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

.class_id:focus {
    outline: none;
}

这适用于 Chrome，但不适用于模拟器或我的手机。我还尝试编辑 jqTouchtheme.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属性似乎不适用于任一浏览器。

score 212 · Accepted Answer

尝试：

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''

score 45 · Accepted Answer

在 Android Default、Android Chrome 和 iOS Safari 上工作 100%

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

score 36 · Accepted Answer

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
}

在你的 css 文件中。它对我有用！

score 18 · Accepted Answer

移除 Android 输入焦点上的橙色框

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

大多数版本的点击突出显示颜色

用户修改4.0.4

score 12 · Accepted Answer

试试焦点线

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

score 10 · Accepted Answer

请注意，使用此 CSS-webkit-user-modify: read-write-plaintext-only;将删除那个可怕的高亮“错误” - 但它可能会破坏您的设备提供特定键盘的能力。对于在三星 Tab 2 上运行 Android 4.0.3 的我们来说，我们无法再使用数字键盘。即使使用 type='number' &/or type='tel' 。非常令人沮丧！顺便说一句，设置点击突出显示颜色无法解决此设备和操作系统配置的问题。我们正在为 android 运行 Safari。

score 7 · Accepted Answer

To make sure the tap-highlight-color property overriding works for you, consider these things first:

Not working:
-webkit-user-modify: read-write-plaintext-only;
// It sometimes triggers the native keyboard to popup when clicking the element

.class:active, .class:focus { -webkit-tap-highlight-color: rgba(0,0,0,0); }
// It's not working if defined for states

Working:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

This case works for Android from v2.3 to v4.x even in a PhongeGap application. I tested it on Galaxy Y with Android 2.3.3, on Nexus 4 with Android 4.2.2 and on Galaxy Note 2 with Android 4.1.2. So don't define it for states only for the element itself.

score 7 · Accepted Answer

在 CSS 文件中使用以下代码

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

这对我有用。我希望它对你有用。

score 3 · Accepted Answer

我只是想分享我的经验。我并没有真正让这个工作，我想避免缓慢的 css-*。我的解决方案是下载好旧的 Eric Meyer 的 Reset CSS v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) 并将这个添加到我的 phonegap 项目中。然后我补充说：

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */

以我的经验，这是一种更快的处理 * 的方法，但它也是一种减少奇怪错误的方法。tap-highlight、-webkit-user-modify: read-write-plaintext-only 和禁用例如文本突出显示的组合给我们带来了很多麻烦。最糟糕的情况之一是键盘输入突然停止工作并且键盘可视化速度变慢。

在禁用橙色突出显示的情况下完成 CSS 重置：

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

score 2 · Accepted Answer

这对我在图像地图区域链接上不起作用，唯一可行的解决方案是通过捕获 ontouchend 事件并通过在处理程序上返回 false 来防止默认浏览器行为来使用 javascript。

使用 jQuery：

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

score 1 · Accepted Answer

我已经尝试过这个并且工作正常：-

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

score 1 · Accepted Answer

这不仅适用于点击，也适用于悬停：

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

score 1 · Accepted Answer

这在 Ionic 中为我工作，只需放入 CSS 文件即可覆盖

:focus {
    outline-width: 0px;
}

score 0 · Accepted Answer

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

 />

score -1 · Accepted Answer

-1

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

大纲：无！重要；

于 2015-02-26T14:34:45.510 回答

score -1 · Accepted Answer

如果设计不使用轮廓，这应该可以完成工作：

*, *::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;
}

android - 禁用焦点上的橙色轮廓突出显示

16 回答 16

Related

Reference