divs या iframes जैसे अन्य तत्वों पर सक्रिय इनपुट या टेक्स्टरेरा के आसपास क्रोम/सफारी सीमा का अनुकरण कैसे करें?

Question

मैं सरल टेक्स्टरेरा तत्व का उपयोग कर रहा था और फिर इसे ifmame के साथ designMode = 'on' के साथ बदल दिया ताकि उपयोगकर्ता को कुछ टेक्स्ट चिह्नित करने और इसे इटैलिक बनाने की संभावना मिल सके। लेकिन मैं अभी भी एक आईफ्रेम को टेक्स्टरेरा की तरह दिखाना चाहता हूं, इसलिए मुझे पाठ के सक्रिय होने पर क्रोम और सफारी में दिखाई देने वाली समानता की आवश्यकता होती है। मैं इस तरह के प्रभाव को कैसे प्राप्त कर सकता हूं?

Answer 1

मैंने अपनी समस्या को निम्न तरीके से हल किया।

जब मुझे पहली बार आईफ्रेम को हाइलाइट करने की आवश्यकता होती है तो मैं नकारात्मक 'बाएं' समन्वय के साथ टेक्स्टरेरा बना रहा हूं (ताकि यह उपयोगकर्ता के लिए अदृश्य हो), इसे फोकस दें और विंडो के माध्यम से इसके सीएसएस गुण प्राप्त करें .getComputedStyle। फिर मैं इन चार गुणों को फोकस आईफ्रेम पर लागू कर रहा हूं: 'रूपरेखा-रंग', 'रूपरेखा-शैली', 'रूपरेखा-चौड़ाई' और 'रूपरेखा-ऑफसेट'।

कुछ कारणों से सफारी 5 आपको 'रूपरेखा-ऑफसेट' के लिए सही मूल्य नहीं देगा। तो समय के लिए मैं इसे '-2px' होने के लिए हार्डकोड किया।

Answer 2

आप :focus छद्म-चयनकर्ता और outline संपत्ति का उपयोग कर सकते हैं:

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

यह तत्व करने के लिए एक पीले रूपरेखा जोड़ना होगा, मुझे यकीन है कि क्या रंग क्रोम और सफारी का उपयोग करता है नहीं कर रहा हूँ, लेकिन सिर्फ जोड़ने अपने पसंदीदा रंग-से-स्वाद।

---

ओपी की टिप्पणी के जवाब में संपादित:

ठीक है, दुर्भाग्य से सीमा के इस प्रकार क्रोम और सफारी में अलग है (और, शायद, अन्य ब्राउज़रों जो समर्थन या इसे समर्थन करेंगे में)। तो यह सही होगा अगर मैं उस तरह की सीमा का अनुकरण कर सकूं जो प्रत्येक उपयोगकर्ता का उपयोग किया जाता है।

कुछ मंच/ओएस विशेष सीएसएस में उपलब्ध रंग हैं (हालांकि ब्राउज़र कार्यान्वयन, जाहिर है, भिन्न होता है):

+----------------------+------------------------------------------------------------------+ 
| 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/

मुझे पता नहीं कर रहा हूँ, हालांकि, किसी भी ब्राउज़र-विशिष्ट विकल्प जो लागू किया जा सकता है। आप किसी विशेष ब्राउज़र से रंग ढूंढने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं, लेकिन मुझे विश्वास नहीं है कि छद्म चयनकर्ताओं तक पहुंचने में कठिनाई के कारण काम करेगा।

Answer 3

आप इस तरह वेबकिट में गोल रूपरेखा प्राप्त कर सकते हैं:

outline: 2px auto red; 

सूचना है कि आउटलाइन की चौड़ाई निर्दिष्ट चौड़ाई का पालन नहीं करेंगे, और रंग या तो पूरी तरह से सही नहीं है।

सामान्य फोकस रंग का उपयोग करने के लिए, आप यह कर सकते हैं:

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

moz में, आप -moz-outline-radius (सिर्फ बॉर्डर-त्रिज्या तरह काम करता है) का उपयोग एक गोल रूपरेखा प्राप्त करने के लिए कर सकते हैं।

Answer 4

मुझे एक लेख मिला जो ब्राउज़र विशिष्ट रंगों का उल्लेख करता है for FireFox और for Safari/Chrome।

मैं जावास्क्रिप्ट में फोकस रिंग रंग पढ़ने की कोशिश कर रहा था, इसलिए मैं इसे नरम कर सकता हूं और इसे हमारे यूआई के भीतर उपयोग कर सकता हूं, लेकिन मैंने छोड़ दिया। यहां परीक्षण कोड था जिसके साथ मैं खेल रहा था:

<!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>