如何在其他元素（例如div或iframe）上的活动输入或textarea周围模拟Chrome / Safari边框？ [英] How to simulate Chrome/Safari border around active input or textarea on other elements such as divs or iframes?

问题描述

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

解决方案

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

当我第一次需要突出显示iframe时，我创建了带有负'左'坐标的textarea（以便它对用户不可见），请给它一个焦点并通过window.getComputedStyle获取其CSS属性。然后，我将这四个属性应用于iframe：'outline-color'，'outline-style'，'outline-width'和'outline-offset'。

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

I was using simple textarea element and then replaced it with iframe with designMode='on' to give user the possibility to mark some text and make it italic. But I still want an iframe to look like textarea, so I need a border around it similar to that which appears in Chrome and Safari when textarea is active. How can I achieve such an effect?

解决方案

I solved my problem in a following way.

When I need to highlight iframe for the first time I’m creating textarea with negative 'left' coordinate (so that it’s invisible to user), give it a focus and get its CSS properties via window.getComputedStyle. Then I’m applying four of these properties to focused iframe: 'outline-color', 'outline-style', 'outline-width' and 'outline-offset'.

For some reason Safari 5 wouldn’t give you correct value for 'outline-offset'. So for the time being I hardcoded it to be '-2px'.

这篇关于如何在其他元素（例如div或iframe）上的活动输入或textarea周围模拟Chrome / Safari边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！