如何在 div 或 iframe 等其他元素上模拟活动输入或 textarea 周围的 Chrome/Safari 边框?

Posted

技术标签:

【中文标题】如何在 div 或 iframe 等其他元素上模拟活动输入或 textarea 周围的 Chrome/Safari 边框?【英文标题】:How to simulate Chrome/Safari border around active input or textarea on other elements such as divs or iframes? 【发布时间】:2011-04-17 11:14:55 【问题描述】:

我使用了简单的 textarea 元素,然后将其替换为 iframe,并设置了 designMode='on',让用户可以标记一些文本并使其变为斜体。但我仍然希望 iframe 看起来像 textarea,所以我需要一个边框,类似于当 textarea 处于活动状态时出现在 Chrome 和 Safari 中的边框。怎样才能达到这样的效果?

【问题讨论】:

【参考方案1】:

你可以像这样在 webkit 中得到圆形轮廓:

outline: 2px auto red;

请注意,轮廓的宽度不会服从指定的宽度,颜色也不完全准确。

要使用正常的焦点颜色,您可以这样做:

outline: 2px auto -webkit-focus-ring-color;

在 moz 中,您可以使用-moz-outline-radius(与border-radius 类似)来获得圆形轮廓。

【讨论】:

-webkit-focus-ring-color 正是我们所需要的。不幸的是,像 -webkit-focus-ring-width 和 -webkit-focus-ring-offset 这样的常量似乎不见了。 如你所见,Sarari 渲染 'outline: 2px auto -webkit-focus-ring-color' 完全不同:matholymp.org.ua/_temp/outline.png(上面是原始的 5px 宽度 -2px 偏移,下面是2px 宽度)。【参考方案2】:

您可以使用:focus psuedo-selector 和outline 属性:

`.elementClass:focus 
    outline: 1px solid #ffa;

这将为元素添加黄色轮廓,我不确定 Chrome 和 Safari 使用什么颜色,但只需添加您喜欢的颜色即可。


编辑以回应 OP 的评论:

不幸的是,这种边框在 Chrome 和 Safari 中是不同的(也许在其他支持或将支持它的浏览器中)。因此,如果我能准确模拟每个用户习惯的那种边框,那将是完美的。

CSS 中有一些特定于平台/操作系统的颜色可用(尽管浏览器的实现显然会有所不同):

+----------------------+------------------------------------------------------------------+
|  ActiveBorder        |                                            Active window border  |
|  ActiveCaption       |                                           Active window caption  |
|  AppWorkspace        |                 Background color of multiple document interface  |
|  Background          |                                              Desktop background  |
|  ButtonFace          |                              Face color for 3D display elements  |
|  ButtonHighlight     |    Dark shadow for 3D display elements (facing away from light)  |
|  ButtonShadow        |                            Shadow color for 3D display elements  |
|  ButtonText          |                                            Text on push buttons  |
|  CaptionText         |              Text in caption, size box, and scrollbar arrow box  |
|  GrayText            |            Grayed (disabled) text (#000 if not supported by OS)  |
|  Highlight           |                                   Item(s) selected in a control  |
|  HighlightText       |                           Text of item(s) selected in a control  |
|  InactiveBorder      |                                          Inactive window border  |
|  InactiveCaption     |                                         Inactive window caption  |
|  InactiveCaptionText |                            Color of text in an inactive caption  |
|  InfoBackground      |                           Background color for tooltip controls  |
|  InfoText            |                                 Text color for tooltip controls  |
|  Menu                |                                                 Menu background  |
|  MenuText            |                                                   Text in menus  |
|  Scrollbar           |                                            Scroll bar gray area  |
|  ThreeDDarkShadow    |                             Dark shadow for 3D display elements  |
|  ThreeDFace          |                              Face color for 3D display elements  |
|  ThreeDHighlight     |                         Highlight color for 3D display elements  |
|  ThreeDLightShadow   |          Light color for 3D display elements (facing the light)  |
|  ThreeDShadow        |                             Dark shadow for 3D display elements  |
|  Window              |                                               Window background  |
|  WindowFrame         |                                                    Window frame  |
|  WindowText          |                                                 Text in windows  |
+----------------------+------------------------------------------------------------------+

来源:http://blogs.sitepoint.com/2009/08/11/css-system-styles/

不过,我不知道可以应用任何特定于浏览器的选项。您或许可以使用 javascript 从特定浏览器中查找颜色,但由于访问伪选择器的困难,我不相信这会奏效。

【讨论】:

好吧,不幸的是这种边框在 Chrome 和 Safari 中是不同的(也许在其他支持或将支持它的浏览器中)。因此,如果我能准确地模拟每个用户习惯的那种边框,那将是完美的。 感谢您提出使用 JavaScript 查找边框颜色的想法。我使用它并解决了我的问题。有趣的是,一些特定于操作系统的颜色在 CSS 中可用,尽管很难想到应用程序。 @Danylo,我能想​​到人们可能想要模仿特定于平台的警报的几个原因......对于网络应用程序来说这也是一个好主意,让他们更多地关注-家?你用什么 JS 来查找特定于浏览器的颜色? 我使用了类似这样的代码:[var textarea=document.createElement('textarea'); document.body.appendChild(textarea); textarea.focus(); var color=window.getComputedStyle(textarea,null).getPropertyValue('outline-color');] 我在下面的回答中更详细地描述了该方法。【参考方案3】:

我发现一篇文章提到了浏览器特定颜色 for FireFox 和 for Safari/Chrome。

我试图在 javascript 中读取对焦环颜色,以便可以柔化它并在我们的 UI 中使用它,但我放弃了。这是我正在使用的测试代码:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="hellowebkit" style="outline: 5px auto -webkit-focus-ring-color;">outline: 5px auto -webkit-focus-ring-color</div>
        <div style="outline: 5px auto green;">outline: 5px auto green</div>
        <div style="outline: 5px auto -moz-mac-focusring;">outline: 5px auto -moz-mac-focusring</div>
        <div style="background-color:-webkit-focus-ring-color;">-webkit-focus-ring-color</div>
        <div style="background-color:-moz-mac-focusring;">-moz-mac-focusring</div>
        <div id="hello" style="color:highlight;">hello</div>
        <button id="btn" onclick="readval()">readval()</button>
        <button id="btn" onclick="readPropertyVal()">readPropertyVal()</button>
        <input id="inp" value="input" />
        <div id="test">test</div>
        <script>
            function readval() 
                    var hello = document.getElementById('hello');
                    var style = hello.currentStyle || getComputedStyle(hello, null);
                    var color = style.color;
                    var currentColor = style.currentColor;
                    var hellowebkit = document.getElementById('hellowebkit');
                    var hellowebkitStyle = hellowebkit.currentStyle || getComputedStyle(hello, null);
                    var outlineColor = hellowebkitStyle.outlineColor;
                    alert('color:' + color + ' currentColor:' + currentColor + ' outlineColor:' + outlineColor + ' color.match: ' + ('' + color).match(/rgb[(](\d+)[,]\s*(\d+)[,]\s*(\d+)[)]/));
                    var test = document.getElementById('test');
                    test.style.backgroundColor = '' + outlineColor;
               
            function readPropertyVal() 
                    //var inp = document.getElementById('hello');
                    //var inp = document.getElementById('btn');
                    var inp = document.getElementById('inp');
                    var color = getComputedStyle(inp, null).getPropertyValue('outline-color');
                    alert('color:' + color);
                    var test = document.getElementById('test');
                    test.style.backgroundColor = '' + color;
               
        </script>
    </body>
</html>

【讨论】:

【参考方案4】:

我通过以下方式解决了我的问题。

当我第一次需要突出显示 iframe 时,我正在创建带有负“左”坐标的 textarea(这样它对用户不可见),给它一个焦点并通过 window.getComputedStyle 获取它的 CSS 属性。然后我将其中四个属性应用到聚焦 iframe:'outline-color'、'outline-style'、'outline-width' 和 'outline-offset'。

出于某种原因,Safari 5 不会为您提供正确的“轮廓偏移”值。所以暂时我把它硬编码为'-2px'。

【讨论】:

当心,window.getComputedStyle 在 IE 中不起作用...它为 dom 节点提供了一个 currentStyle 属性。 msdn.microsoft.com/en-us/library/ms535231.aspx IE9 实现了getComputedStyle,以前的版本不画轮廓。所以'if(window.getComputedStyle)'检查就足以避免这个问题。

以上是关于如何在 div 或 iframe 等其他元素上模拟活动输入或 textarea 周围的 Chrome/Safari 边框?的主要内容,如果未能解决你的问题,请参考以下文章

关于div包裹imgiframe等标签会多3px或4px的问题

在 iPad 上模拟滚动事件

解决 iframe 在 ios 上不能滚动的问题

如何将 div 放置在两个 iframe 上,其中一个 iframe 具有外部(不同域)内容?

转让iframe在iOS设备手机浏览器上支持滚动

DIV悬浮层如何跨页面在iframe框架之上显示