IBM Worklight 6.1 - 禁用焦点上的橙色轮廓突出显示不起作用

Posted 2023-03-06

【中文标题】IBM Worklight 6.1 - 禁用焦点上的橙色轮廓突出显示不起作用

【英文标题】：IBM Worklight 6.1 - Disable orange outline highlight on focus is not working

【发布时间】：2014-03-11 23:10:42

【问题描述】：

我正在使用 Worklight 6.1 开发一个带有一个文本框和一个文本区域的移动应用程序。我需要删除 android 设备中焦点上的橙色轮廓突出显示，所以我已经尝试了所有编写的代码：Disable orange outline highlight on focus"。

在 IBM Worklight 6.0 中这有效：

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

我在 IBM Worklight 6.1 上尝试过相同的代码，但它不起作用。

这是我的 html 代码：

<div>
    <input type="text"/>
    <textarea>
    </textarea>
</div>

在 6.1 中高亮显示仅几秒钟。

---

添加以下代码后，@Ilya 给出的答案是相同的输出：

【问题讨论】：

使用的Android OS版本是什么？

@Idan Adar Android 4.4.2

我们在谈论哪个 HTML 小部件？只有文本字段？

@IdanAdar 是的，只有文本框和 texarea

【参考方案1】：

这是工作代码。使用 IBM worklight 6.0 和 IBM Worklight 6.1 在设备 [Samsung S Duos、Sony Xperia M 和 Samsung Tab II] 中进行测试。

textarea:focus, input:focus, input,textarea
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-modify: read-write-plaintext-only; 
    border: none !important;
    margin: none !important;

【参考方案2】：

查看这个基于 Worklight 6.1.0 的项目：Disable Focus Rings in Android

其中我使用了以下 CSS 规则：

textarea, input 
    /* Deals with Android 4.x */
    outline: none;

    /* Deals with Android 2.x */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some other Androids */

在运行 Android OS v4.4 的 Nexus 5 设备中，当关注“文本”类型的 textarea 或 input 字段时，不会显示对焦环，甚至只有几分之一秒：

如果这不适合你，那么你有一些其他的 CSS 阻止应用 CSS 规则...

【讨论】：

我已经下载了您分享的项目[在Android中禁用对焦环]。我导入工作区并使用三星 S Duos、索尼 Xperia M 和三星 Tab II 进行测试，但结果相同。这可能是 Worklight studio Developer 版本 6.1 的问题吗？

不可以，因为这是 CSS，Worklight 不是 CSS 的实现者。这与特定设备有关。如您所见，它在 Nexus 5 上运行良好。我没有您列出的设备，因此无法对其进行测试。你确定你指的不是密码输入字段吗？

@IdanAdar 问题特别指出，大纲出现在输入字段的焦点期间。你怎么能期望没有:focus 的css代码可以工作。我已经下载并测试了你的代码，因为我很惊讶地看到你的代码。但不幸的是，它对我不起作用。平时有没有亮点。

【参考方案3】：

在关注输入之前需要关闭轮廓

textarea, input
    outline: none !important;

【讨论】：

@IdanAdar，我也试过了，但结果是一样的。

我不同意，我在 Worklight 6.1 中创建了一个带有文本区域和文本字段的新应用程序，应用上述 CSS 规则使橙色突出显示在焦点上消失。在运行 Android OS 4.4.x 的 Nexus 5 设备上进行了测试。无论如何，这与 Worklight 无关，而是与 Android 和 CSS 相关。

在这里工作的人...提供一个测试用例项目。

@IdanAdar 也许边界有问题？添加此代码边框：none !important;

@Ilya 我已经尝试过边框也与上图相同的输出