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

发布于 2024-10-20 06:49:32 字数 1135 浏览 7 评论 0原文

我正在使用 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 属性似乎不适用于任一浏览器。

原文

I am coding an app using jQuery, jqTouch and phonegap and have run across a persistent problem which arises when a user submits a form using the Go button on the soft keyboard.

Although it is easy to get the cursor to move to the appropriate form input element by using $('#input_element_id').focus(), the orange outline highlight always returns to the last input element on the form. (The highlight does not show up when the form is submitted using the form submit button.)

What I need is to find a way either to disable the orange highlight completely or else make it move to the same input element as the cursor.

So far, I have tried adding the following to my CSS:

.class_id:focus {
    outline: none;
}

This works in Chrome but not on the emulator or on my phone. I have also tried editing the jqTouch theme.css to read:

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

With no effect.
I have also tried each of the following additions to the AndroidManifest.xml file:

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

None of which have any effect.

Update: I have done some more troubleshooting with this and to date have found:

The outline property works only on Chrome, not on the Android browser.
The -webkit-tap-highlight-color property does in fact work on the Android browser, though not on Chrome. It disables the highlight on focus as well as on tapping.
The -webkit-focus-ring-color property does not seem to work on either browser.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

‖放下 2024-10-27 06:49:33

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

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

I have tried this one and worked fine :-

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

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（16）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。