IE8 और 9 में प्लेसहोल्डर विशेषता का समर्थन कैसे करें

Question

मेरे पास एक छोटा मुद्दा है, placeholderइनपुट बक्से के लिए विशेषता IE 8-9 में समर्थित नहीं है।

मेरी परियोजना (एएसपी नेट) में यह समर्थन करने का सबसे अच्छा तरीका क्या है। मैं jQuery का उपयोग कर रहा हूँ। क्या मुझे इसके लिए कुछ अन्य बाहरी उपकरणों का उपयोग करना चाहिए?

क्या http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html एक अच्छा समाधान है?

Comments

पेडेंट का कोना: यह एक विशेषता है, एक टैग नहीं। एक टैग के चारों ओर नुकीले कोष्ठक होते हैं (जैसे <input>); एक विशेषता नुकीले कोष्ठकों (जैसे placeholder="This is an attribute value") के अंदर एक कुंजी-मूल्य जोड़ी है । प्रश्न को छोड़ना जैसा है, ताकि भविष्य के लोग जो एक ही प्रश्न पूछते हैं, वह इसे पा सकें।

— पॉल डी। वेट

यह लिंक काम नहीं कर रहा है। मैंने $ ("[प्लेसहोल्डर]") चयनकर्ता के आसपास अतिरिक्त उद्धरण हटा दिए और यह ठीक था।

— 19

उस लिंक में समाधान भी वेबकिट में मूल समर्थन के अनुसार पासवर्ड बक्से को संभाल नहीं करता है

— geedubb

आपके द्वारा दिया गया लिंक वास्तव में बहुत अच्छी तरह से काम करता है - पासवर्ड के अलावा यह एक इलाज का काम करता है और इसे सेटअप करने के लिए सरल नहीं हो सकता है

— hobailey

लिंक एक महान तय है

— Pixelomo

Answer 1

आप इस jQuery प्लगइन का उपयोग कर सकते हैं: https://github.com/mathiasbynens/jquery-placeholder

लेकिन आपका लिंक भी एक अच्छा समाधान है।

Comments

प्रश्न में दिए गए लिंक ने मेरे लिए काम नहीं किया; इससे फॉर्म सबमिट में समस्याएँ थीं। इस उत्तर में आपने जो समाधान सुझाया है, वह बहुत अधिक मजबूत है और एक उपचार का काम करता है।

— जॉनी व्हाइट

वास्तव में मैंने यह एक कोशिश की और ठीक काम कर रहा है - लेकिन जैसे ही मैं एक फॉर्म और एक पासवर्ड फ़ील्ड के साथ एक लाइटबॉक्स लोड कर रहा हूं, सब कुछ काम करता है लेकिन पासवर्ड फ़ील्ड नहीं - यह सिर्फ खाली है।

— जुरिक

मेरे IE8 में पासवर्ड प्लेसहोल्डर डॉट्स में है

— Mladen Janjetovic

मैं इसे ie8 में भी नहीं देख सकता। मैं इसके चारों ओर काम किया जब सिर्फ खेतों में ऊपर कुछ पाठ दिखाने के द्वारा ie8।

— १०:१५ बजे

jQuery-प्लेसहोल्डर अलग व्यवहार करता है। जब उपयोगकर्ता प्लेसहोल्डर्स के लिए फ़ायरफ़ॉक्स में सामान्य व्यवहार की तरह क्षेत्र पर कुछ टाइप करना शुरू करता है, तो इसके बजाय प्लेसहोल्डर को फ़ोकस पर हटा देता है।

— सुपरटनस्की

Answer 2

आप इनमें से किसी भी पॉलीफिल का उपयोग कर सकते हैं:

• https://github.com/jamesallardice/Placeholders.js (पासवर्ड फ़ील्ड का समर्थन नहीं करता है)
• https://github.com/chemerisuk/better-placeholder-polyfill

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

Comments

मैंने इसे अपडाउन किया क्योंकि मुझे नॉन-जेकरी सॉल्यूशन के विचार से प्यार है, लेकिन अभी इस कोड को IE8 में समस्या है इसलिए यह मेरे लिए उपयुक्त नहीं है। github.com/jamesallardice/Placeholders.js/issues/17

— दान Searle

यह समाधान पासवर्ड बक्सों को नहीं संभालता है

— Jurik

@ ज्यूरिक मैंने एक अतिरिक्त पॉलीफिल जोड़ा है - मुझे आशा है कि यह मदद करता है।

— Starbeamrainbowlabs

यहां तक कि इस प्लगइन के वितरक का कहना है कि इस प्लगइन <IE9 में पासवर्ड फ़ील्ड से हैंडल नहीं करता github.com/jamesallardice/Placeholders.js/issues/...

— Jurik

पासवर्ड फ़ील्ड अभी भी iE8 में काम नहीं करता है। पासवर्ड फ़ील्ड के लिए ie8 में स्वीकृत उत्तर लिंक काम करता है।

— सूसी

Answer 3

$ .Browser.msie नवीनतम JQuery पर अब और नहीं है ... आप का उपयोग करने के लिए है $ .support

नीचे की तरह:

 <script>

     (function ($) {
         $.support.placeholder = ('placeholder' in document.createElement('input'));
     })(jQuery);


     //fix for IE7 and IE8
     $(function () {
         if (!$.support.placeholder) {
             $("[placeholder]").focus(function () {
                 if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
             }).blur(function () {
                 if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
             }).blur();

             $("[placeholder]").parents("form").submit(function () {
                 $(this).find('[placeholder]').each(function() {
                     if ($(this).val() == $(this).attr("placeholder")) {
                         $(this).val("");
                     }
                 });
             });
         }
     });
 </script>

Comments

यह एक आकर्षण की तरह काम करता है, मुझे यह प्लगइन्स जोड़ने से बेहतर लगता है, बहुत बहुत धन्यवाद

— LemonCool

@vsync नहीं, यदि आप अच्छी तरह से पढ़ते हैं, तो मैंने कहा कि प्लगइन्स, बहुवचन, अधिकांश विकल्प मैंने पाया है कि आपको कई फ़ाइलों का उपयोग करने की आवश्यकता है, कई टन कोड बनाम कुछ लाइन के साथ। क्या आप थोड़े अभिमानी नहीं हैं, और उस टिप्पणी का जवाब देने के लिए कैसे डो ने कहा

— लेमनकूल

यह वास्तव में इस्तेमाल नहीं किया जाना चाहिए। यह jQuery के आंतरिक उपयोग के लिए है और इसे किसी भी समय हटाया जा सकता है। api.jquery.com/category/deprecated/deprecated-1.9

— विल

Answer 4

यदि आप jquery का उपयोग करते हैं तो आप इस तरह कर सकते हैं। इस साइट से प्लेसहोल्डर Jquery के साथ

$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

ये वैकल्पिक लिंक हैं

1. प्लेसहोल्डर jquery लाइब्रेरी
2. HTML5 पॉलीफ़िल - प्लेसहोल्डर सेक्शन के लिए जाएं

Comments

यह उत्तर काम करता है, लेकिन आपको पूर्ण कार्यक्षमता के लिए लिंक का पालन करने की आवश्यकता है। यहाँ अकेले कोड काम नहीं करेगा।

— हकीकी

inc यह काम नहीं करेगा, यह एक उपहास कोड है! आप submitघटना के लिए बार-बार उसी "फॉर्म" को क्यों बांधते हैं ? प्रस्तुत घटना का किसी भी चीज़ से क्या लेना-देना है

— vsync

क्या होगा, अगर मैं IE8 में प्लेसहोल्डर पाठ के समान पाठ टाइप करता हूं ???

— बिमल दास

Answer 5

मेरे पास कई प्लगइन्स के साथ संगतता के मुद्दे थे, जो मैंने कोशिश की, यह मुझे पाठ इनपुट पर प्लेसहोल्डर्स का समर्थन करने का सबसे सरल तरीका लगता है:

function placeholders(){
    //On Focus
    $(":text").focus(function(){
        //Check to see if the user has modified the input, if not then remove the placeholder text
        if($(this).val() == $(this).attr("placeholder")){
            $(this).val("");
        }
    });

    //On Blur
    $(":text").blur(function(){
        //Check to see if the use has modified the input, if not then populate the placeholder back into the input
        if( $(this).val() == ""){
            $(this).val($(this).attr("placeholder"));
        }
    });
}

Comments

यह IE9 के लिए समर्थन कर रहा है?

— विकु

Answer 6

$(function(){    
    if($.browser.msie && $.browser.version <= 9){
        $("[placeholder]").focus(function(){
            if($(this).val()==$(this).attr("placeholder")) $(this).val("");
        }).blur(function(){
            if($(this).val()=="") $(this).val($(this).attr("placeholder"));
        }).blur();

        $("[placeholder]").parents("form").submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr("placeholder")) {
                    $(this).val("");
                }
            })
        });
    }
});

इसे इस्तेमाल करे

Answer 7

मैं इस का उपयोग करता हूं, यह केवल जावास्क्रिप्ट है।

मेरे पास बस एक मूल्य के साथ एक इनपुट तत्व है, और जब उपयोगकर्ता इनपुट तत्व पर क्लिक करता है, तो वह इसे एक मूल्य के बिना इनपुट तत्व में बदल देता है।

आप आसानी से सीएसएस का उपयोग करके पाठ का रंग बदल सकते हैं। प्लेसहोल्डर का रंग id #IEinput में रंग है, और आपके टाइप किए गए पाठ का रंग id #email में रंग होगा। GetElementsByClassName का उपयोग न करें, क्योंकि IE के संस्करण जो प्लेसहोल्डर का समर्थन नहीं करते हैं, getElementsByClassName का समर्थन न करें!

आप टेक्स्ट के मूल पासवर्ड इनपुट के प्रकार को सेट करके पासवर्ड इनपुट में प्लेसहोल्डर का उपयोग कर सकते हैं।

टिंकर: http://tinker.io/4f7c5/1 - JSfiddle सर्वर नीचे हैं!

*मेरी खराब इंग्लिश के लिए माफ़ कीजिये

JAVASCRIPT

function removeValue() {
    document.getElementById('mailcontainer')
        .innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
    document.getElementById('email').focus(); }

एचटीएमएल

<span id="mailcontainer">
    <input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>

Comments

यदि क्षेत्र खाली है और प्लेसहोल्डर खो गया है तो प्लेसहोल्डर को वापस आना चाहिए

— क्रिस प्रैट

Answer 8

दूसरों के यहाँ उतरने के लिए। इसी से मेरा काम बना है:

//jquery polyfill for showing place holders in IE9
$('[placeholder]').focus(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
    }
}).blur(function() {
    var input = $(this);
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }
}).blur();

$('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    })
});

इसे आप script.js फ़ाइल में जोड़ें। Http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jn.html के सौजन्य से

Answer 9

चूंकि अधिकांश समाधान jQuery का उपयोग करते हैं या यह संतोषजनक नहीं है जैसा कि मैंने चाहा था कि मैं मूटूल के लिए खुद के लिए एक स्निपेट लिखूं।

function fix_placeholder(container){
    if(container == null) container = document.body;

    if(!('placeholder' in document.createElement('input'))){

        var inputs = container.getElements('input');
        Array.each(inputs, function(input){

            var type = input.get('type');

            if(type == 'text' || type == 'password'){

                var placeholder = input.get('placeholder');
                input.set('value', placeholder);
                input.addClass('__placeholder');

                if(!input.hasEvent('focus', placeholder_focus)){
                    input.addEvent('focus', placeholder_focus);
                }

                if(!input.hasEvent('blur', placeholder_blur)){
                    input.addEvent('blur', placeholder_blur);
                }

            }

        });

    }
}

function placeholder_focus(){

    var input = $(this);    

    if(input.get('class').contains('__placeholder') || input.get('value') == ''){
        input.removeClass('__placeholder');
        input.set('value', '');
    }

}

function placeholder_blur(){

    var input = $(this);    

    if(input.get('value') == ''){
        input.addClass('__placeholder');
        input.set('value', input.get('placeholder'));
    }

}

मैं स्वीकार करता हूं कि यह दूसरों की तुलना में थोड़ा अधिक दिखता है, लेकिन यह ठीक काम करता है। __ प्लेसहोल्डर, प्लेसहोल्डर टेक्स्ट फैंसी का रंग बनाने के लिए एक ccs-class है।

मैंने window.addEvent ('पहले से ही' ..., और किसी भी additinally पॉपअप के लिए पॉपअप कोड में fix_placeholder का इस्तेमाल किया ।

उम्मीद है आप इसे पसंद करते हैं।

सधन्यवाद।

Answer 10

मैंने इस लिंक के कोड का उपयोग किया http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

लेकिन ब्राउज़र डिटेक्शन में मैंने इस्तेमाल किया:

if (navigator.userAgent.indexOf('MSIE') > -1) {
 //Your placeholder support code here...
}

Answer 11

<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />

Answer 12

नीचे दिए गए कोड को जोड़ें और यह किया जाएगा।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
    <script type="text/javascript">
        // Mock client code for testing purpose
        $(function(){
            // Client should be able to add another change event to the textfield
            $("input[name='input1']").blur(function(){ alert("Custom event triggered."); });    
            // Client should be able to set the field's styles, without affecting place holder
            $("textarea[name='input4']").css("color", "red");

            // Initialize placeholder
            $.Placeholder.init();

            // or try initialize with parameter
            //$.Placeholder.init({ color : 'rgb(255, 255, 0)' });

            // call this before form submit if you are submitting by JS
            //$.Placeholder.cleanBeforeSubmit();
        });
    </script>

Https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip से पूरा कोड और डेमो डाउनलोड करें

Answer 13

यहाँ एक जावास्क्रिप्ट फ़ंक्शन है जो IE 8 और उससे नीचे के लिए प्लेसहोल्डर बनाएगा और यह पासवर्ड के लिए भी काम करता है:

/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {	
	for (var e = 0; e < document.fm.elements.length; e++) {
		if (fm.elements[e].placeholder != undefined &&
		document.createElement("input").placeholder == undefined) { // IE 8 and below					
			fm.elements[e].style.background = "transparent";
			var el = document.createElement("span");
			el.innerHTML = fm.elements[e].placeholder;
			el.style.position = "absolute";
			el.style.padding = "2px;";
			el.style.zIndex = "-1";
			el.style.color = "#999999";
			fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
			fm.elements[e].onfocus = function() {
					this.style.background = "yellow";	
			}
			fm.elements[e].onblur = function() {
				if (this.value == "") this.style.background = "transparent";
				else this.style.background = "white";	
			}		
		} 
	}
}

add_placeholders(document.getElementById('fm'))

<form id="fm">
  <input type="text" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <textarea name="description" placeholder="Description"></textarea>
</form>

Answer 14

    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>

Comments

$ .browser.msie अब समर्थित नहीं है। इसके बजाय फीचर डिटेक्शन का उपयोग करके देखें।

— आमंत्रित करें