Fatal编程技术网
  • iframe/
  • 如何在其他元素（如div或iframe）的活动输入或文本区域周围模拟Chrome/Safari边框？

如何在其他元素（如div或iframe）的活动输入或文本区域周围模拟Chrome/Safari边框？

iframe google-chrome input

如何在其他元素（如div或iframe）的活动输入或文本区域周围模拟Chrome/Safari边框？,iframe,google-chrome,input,textarea,border,Iframe,Google Chrome,Input,Textarea,Border,我使用了简单的textarea元素，然后将其替换为带有designMode='on'的iframe，使用户可以标记一些文本并将其倾斜。但我仍然希望iframe看起来像textarea，所以我需要一个边框围绕它，类似于当textarea处于活动状态时在Chrome和Safari中出现的边框。如何实现这种效果？您可以使用:focuspsuedo选择器和outline属性： `.elementClass:focus { outline: 1px solid #ffa; } 这将为元素添加黄色

我使用了简单的textarea元素，然后将其替换为带有designMode='on'的iframe，使用户可以标记一些文本并将其倾斜。但我仍然希望iframe看起来像textarea，所以我需要一个边框围绕它，类似于当textarea处于活动状态时在Chrome和Safari中出现的边框。如何实现这种效果？

您可以使用
:focus
psuedo选择器和
outline
属性：

`.elementClass:focus {
    outline: 1px solid #ffa;
}
这将为元素添加黄色轮廓，我不确定Chrome和Safari使用什么颜色，但只需添加您喜欢的颜色即可

针对OP的评论编辑了：

不幸的是，这种边界在Chrome和Safari中是不同的（也许在其他支持或将支持它的浏览器中也是如此）。所以，如果我能精确地模拟每个用户都习惯的那种边界，那就太完美了

CSS中有一些特定于平台/操作系统的颜色（尽管浏览器实现显然有所不同）：

资料来源：

不过，我不知道是否有任何特定于浏览器的选项可以应用。您可能可以使用JavaScript从特定浏览器中查找颜色，但我不相信这会起作用，因为访问伪选择器很困难。

我用以下方法解决了我的问题

当我第一次创建带有负“左”坐标的textarea时，需要突出显示iframe（这样用户就看不见它），给它一个焦点，并通过window.getComputedStyle获取它的CSS属性。然后我将这些属性中的四个应用于聚焦iframe：“轮廓颜色”、“轮廓样式”、“轮廓宽度”和“轮廓偏移”

出于某些原因，Safari 5不会为“轮廓偏移”提供正确的值。因此，目前我将其硬编码为“-2px”。

您可以在webkit中获得如下圆形轮廓：

outline: 2px auto red;
请注意，轮廓的宽度将不符合指定的宽度，并且颜色也不完全准确

要使用普通聚焦颜色，可以执行以下操作：

outline: 2px auto -webkit-focus-ring-color;
在moz中，您可以使用
-moz outline radius
（就像边框半径一样）来获得圆形轮廓。

我发现一篇文章提到了浏览器特定的颜色和颜色

我试图用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>


外形：5px自动-webkit聚焦环颜色
外形：5px自动绿
概述：5px自动moz mac调焦
-webkit聚焦环颜色
-moz-mac聚焦
你好
readval（）
readPropertyVal（）
测试
函数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；
警报（'color:'+color+'currentColor:'+currentColor+'outlineColor:'+outlineColor+'color.match:'+（''+color.match:'+.match（/rgb[（]）（（\d+）[，]\s*（\d+[，]\s*（\d+）/）；
var test=document.getElementById（'test'）；
test.style.backgroundColor=''+大纲颜色；
}   
函数readPropertyVal（）{
//var inp=document.getElementById（'hello'）；
//var inp=document.getElementById（'btn'）；
var inp=document.getElementById（'inp'）；
var color=getComputedStyle（inp，null）.getPropertyValue（'outline-color'）；
警报（“颜色：”+颜色）；
var test=document.getElementById（'test'）；
test.style.backgroundColor=''+颜色；
}
不幸的是，这种边框在Chrome和Safari中是不同的（也许在其他支持或将支持它的浏览器中也是如此）。因此，如果我能准确模拟每个用户都习惯的那种边框，那就太完美了。感谢您提出使用JavaScript来查找边框颜色的想法。我用它解决了我的问题。有趣的是，CSS中提供了一些特定于操作系统的颜色，尽管很难想到应用程序。@Danylo，我能想到一些人们可能想模仿特定于平台的警报的原因……也许这也是一个好主意，让web应用程序看起来更像家里的应用程序？您使用了什么JS来查找特定于浏览器的颜色？我使用了类似以下代码：[var textarea=document.createElement（'textarea'）；document.body.appendChild（textarea）；textarea.focus（）；var color=window.getComputedStyle（textarea，null）。getPropertyValue（'outline-color'）；]我在下面的回答中更详细地描述了这种方法。-webkit聚焦环颜色正是所需要的。不幸的是，像-webkit焦点环宽度和-webkit焦点环偏移量这样的常量似乎丢失了。正如您所看到的，Sarari呈现“outline:2px auto-webkit焦点环颜色”的方式非常不同：（上面的是原始5px宽度-2px偏移量，下面是2px宽度）。小心，
窗口。getComputedStyle
在IE中不起作用。。。它为dom节点提供了一个
currentStyle
属性。IE9实现了getComputedStyle，以前的版本不绘制大纲。因此，“if（window.getComputedStyle）”检查足以避免此问题。 
<!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>