我正在使用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
属性似乎无法在任何浏览器上运行。
答案 0 :(得分:209)
尝试:
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent; // i.e. Nexus5/Chrome and Kindle Fire HD 7''
答案 1 :(得分:35)
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
在你的css文件中。 它对我有用!
答案 2 :(得分:33)
适用于Android默认,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;
}
答案 3 :(得分:18)
删除Androids输入焦点上的橙色框
textarea:focus, input:focus{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-modify: read-write-plaintext-only;
}
大多数版本的tap-highlight-color
用户修改 for 4.0.4
答案 4 :(得分:13)
尝试聚焦线
body, textarea:focus, input:focus{
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
答案 5 :(得分:10)
请注意,使用此CSS -webkit-user-modify: read-write-plaintext-only;
将删除那个可怕的突出显示'bug' - 但它可能会扼杀您的设备提供特定键盘的能力。对于我们在Samsung Tab 2上运行Android 4.0.3,我们再也无法获得数字键盘了。甚至使用type ='number'& /或type ='tel'。很沮丧!
顺便说一句,设置点击突出显示颜色没有解决此设备和操作系统配置的此问题。我们正在运行Safari for android。
答案 6 :(得分:7)
要确保tap-highlight-color
属性覆盖适用于您,请首先考虑以下事项:
不工作:
时,有时会触发弹出的本机键盘
-webkit-user-modify:read-write-plaintext-only;
//单击.class:active,.class:focus {-webkit-tap-highlight-color:rgba(0,0,0,0); }
//如果为州定义,它不起作用
工作:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }
即使在PhongeGap应用程序中,此案例适用于 Android从v2.3到v4.x 。我在Android 2.3.3的Galaxy Y上测试了它,在Android 4.2.2的Nexus 4和Android 4.1.2的Galaxy Note 2上测试了它。所以不要仅为元素本身的状态定义它。
答案 7 :(得分:5)
在CSS文件中使用以下代码
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:focus {
outline: 0;
border:none;
color: rgba(0, 0, 0, 0);
}
这对我有用。我希望它适合你。
答案 8 :(得分:2)
这对我在Image Map Area链接上不起作用,唯一可行的解决方案是通过捕获ontouchend事件来使用javascript,并通过在处理程序上返回false来防止默认的浏览器行为。
使用jQuery:
$("map area").on("touchend", function() {
return false;
});
答案 9 :(得分:2)
我只是想分享一下我的经验。我没有真正开始工作,我想避免慢速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;
}
答案 10 :(得分:1)
这不仅适用于水龙头,也适用于悬停:
button, button:hover, li:hover, a:hover , li , a , *:hover, * {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
答案 11 :(得分:1)
我试过这个并且工作得很好: -
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);
}
答案 12 :(得分:0)
如果设计没有使用轮廓,那么应该完成这项工作:
*, *::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;
}
答案 13 :(得分:0)
<EditText
android:id="@+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background_normal"
/>
答案 14 :(得分:0)
在Ionic中对我来说这是有效的,只需将CSS文件放入以覆盖
:focus {
outline-width: 0px;
}
答案 15 :(得分:-1)
尝试使用以下禁用边框轮廓的代码
outline:none!important;