2010-01-09 8 views
13

फ़ायरफ़ॉक्स अक्षम फ़ील्ड पर टूलटिप्स प्रदर्शित नहीं करता है।फ़ायरफ़ॉक्स अक्षम इनपुट फ़ील्ड पर टूलटिप्स नहीं दिखाता

फ़ायरफ़ॉक्स को छोड़कर आईई/क्रोम/सफारी में निम्नलिखित प्रदर्शित करता है टूलटिप:

<input type="text" disabled="disabled" title="tooltip text."/> 

क्यों विकलांग खेतों पर नहीं, Firefox प्रदर्शन टूलटिप? क्या इसके आसपास कोई काम है?

+1

फ़ायरफ़ॉक्स 8 के रूप में, अक्षम तत्व का शीर्षक होवर पर प्रदर्शित होता है। –

उत्तर

9

एक (बहुत पुराना, और बहुत त्याग दिया) बग लगता है। मोज़िला बग #274626#436770

मुझे लगता है कि इसे इच्छित व्यवहार के रूप में समझाया जा सकता है।

दिमाग में आने वाला एक भयानक वर्कअराउंडका उपयोग करके title विशेषता के साथ अदृश्य div के साथ बटन को ओवरलैप करना है; किसी अन्य तरीके से 'onmouseover' बटन को फिर से सक्रिय करने के लिए, लेकिन उस बटन पर किसी भी click ईवेंट को चतुराई से छेड़छाड़ और कचरा करने के लिए।

+0

यह जानना अच्छा है कि यह एक ज्ञात मुद्दा है और इसकी सूचना मिली है। बेकार है कि कोई भी इस पर काम नहीं कर रहा है। जानकारी के लिए धन्यवाद। –

+1

मैं सहमत हूं। मुझे यकीन नहीं है कि यह एक बग है लेकिन मानक की व्याख्या जहां यह कहती है कि अक्षम तत्वों को फोकस नहीं मिलता है। हालांकि, मैं इसकी उपयोगिता देख सकता हूं। – Rob

+2

मैंने फ़ायरफ़ॉक्स पर एक पैच सबमिट किया जो # 274626 में अक्षम टूलटिप्स को ठीक करता है, इसलिए उम्मीद है कि इसे रिलीज़ होने में लंबा समय नहीं लगेगा। –

-1

आप जावास्क्रिप्ट का उपयोग कर सकते हैं। माउसओवर घटना का प्रयोग करें।

(JQuery और Mootools जैसे कई पुस्तकालयों में टूलटिप प्लगइन्स उपलब्ध हैं। इनका उपयोग करके आप टूलटिप्स भी शैली बना सकते हैं)।

+0

हाँ कि तुरंत दिमाग में आया। हालांकि, यदि जावास्क्रिप्ट का उपयोग किये बिना इसे करने का कोई तरीका है, तो यह बहुत अच्छा होगा। धन्यवाद। –

1

z अनुक्रमण बात इस तरह किया जा सकता है:

.btnTip 

    { 

    position: absolute; 

    left: 0%; 

    right: 0%; 

    z-index: 100; 

    width: 50px; 

    /*background-color: red;*/ 

    height: 17px; 

    } 

(...)

<div style="background-color: gray; width: 400px;"> 

    Set width of the tip-span to the same as the button width. 

    <div style="text-align: center;"> 

    <span style="position:relative;"> 

     <span class="btnTip" title="MyToolTip">&nbsp;</span> 

     <input type="button" name="" disabled="disabled" value="Save" style="width: 50px;height:17px;" />           

    </span> 

    </div>    

बाएं और दाएं स्थिति में मदद करता है अक्षम तत्व के शीर्ष पर मेजबान। जेड-इंडेक्स परिभाषित करता है कि आप किस प्रकार की परत डालते हैं।

ज़ेड-लेयर की उच्च संख्या अधिक 'शीर्ष पर' होगी।

होस्ट और/या अक्षम तत्व का जेड-इंडेक्स गतिशील रूप से सेट किया जाना चाहिए।

जब अक्षम तत्व अक्षम होता है तो आप टूलटिप होस्ट को शीर्ष पर और इसके विपरीत चाहते हैं - कम से कम यदि आप अक्षम नहीं होने पर अपने तत्व (बटन) पर क्लिक करने में सक्षम होना चाहते हैं।

3

आप इस के आसपास jQuery कोड के साथ काम कर सकते हैं की तरह:

if ($.browser.mozilla) { 
     $(function() { 
      $('input[disabled][title]') 
       .removeAttr('disabled') 
       .addClass('disabled') 
       .click(function() {return false}) 
      }) 
    } 
1

मैं वही समस्या का सामना करना पड़ा है और मैं juery और छोटे सीएसएस वर्ग का उपयोग कर इसे ठीक कर सकता है, तो आप दो नए स्पान तत्व और एक बनाने के लिए की आवश्यकता होगी सीएसएस वर्ग जो इस प्रकार

बस एक सामान्य js और सीएसएस फ़ाइल जो आवेदन या वेब साइट

.DisabledButtonToolTipSpan 
{ 
position :absolute; 
z-index  :1010101010; 
display  :block; 
width  :100%; 
height  :100%; 
top   :0;   
} 

प्रदर्शित करने के लिए टूलटिप च भर में प्रयोग किया जाता है में इन ऐड हैं या फ़ायरफ़ॉक्स ब्राउज़र में अक्षम बटन।

$(window).load(function() { 
    if ($.browser.mozilla) { 
       $("input").each(function() { 
        if ((this.type == "button" || this.type == "submit") && this.disabled) { 

         var wrapperSpan = $("<span>"); 
         wrapperSpan.css({ position: "relative" }); 
         $(this).wrap(wrapperSpan); 

         var span = $("<span>"); 
         span.attr({ 
          "title": this.title, 
          "class": "DisabledButtonToolTipSpan" 
         }); 
         $(this).parent().append(span); 
        } 
       }); 
      } 
     }); 

उम्मीद है कि यह मदद करता है, प्रीतम।

6

मुझे लगता है कि आप बूटस्ट्रैप जैसे कुछ ढांचे का उपयोग कर रहे हैं। यदि ऐसा है, तो यह 'अक्षम' तत्व में pointer-events: none जोड़ें, इसलिए सभी माउस ईवेंट अनदेखा कर दिए जाते हैं।

.btn[disabled] { 
    pointer-events: auto !important; 
} 

समस्या को ठीक कर सकता है।

+0

आप एक जीवन बचतकर्ता हैं! पूरी तरह से काम किया ... यह ठीक बूटस्ट्रैप के साथ समस्या यह है ... और हम सिर्फ शीर्षक को दिखाने के लिए भले ही बटन अंत उपयोगकर्ता क्या उस बटन करता है सूचित करने के लिए अक्षम किया गया है की जरूरत है! ;) –

संबंधित मुद्दे