আইই 8 এবং 9 এ স্থানধারক বৈশিষ্ট্য কীভাবে সমর্থন করবেন


132

আমার একটি ছোট সমস্যা আছে, placeholderআইপি 8-9 এ ইনপুট বাক্সগুলির জন্য অ্যাট্রিবিউটটি সমর্থিত নয়।

আমার প্রকল্পে (এএসপি নেট) এই সহায়তা করার সর্বোত্তম উপায় কী। আমি jQuery ব্যবহার করছি। আমি কি এর জন্য আরও কিছু বাহ্যিক সরঞ্জাম ব্যবহার করতে চাই?

Http://www.hagenburger.net/BLOG/HTML5- ইনপুট- স্থানধারক- ফিক্স- উইথ- jQuery.html ভাল সমাধান?


7
পেডেন্টের কোণ: এটি একটি বৈশিষ্ট্য, কোনও ট্যাগ নয়। একটি ট্যাগের চারপাশে মজাদার বন্ধনী রয়েছে (যেমন <input>); অ্যাট্রিবিউট হ'ল পয়েন্টি-বন্ধনীগুলির (যেমন placeholder="This is an attribute value") ভিতরে একটি মূল-মান জুড়ি । প্রশ্নটি যেমন রয়েছে তেমনি রেখে দেওয়া, যাতে ভবিষ্যতের লোকেরা একই প্রশ্ন জিজ্ঞাসা করতে পারে।
পল ডি ওয়েট

2
সেই লিঙ্কটি যেমন হয় তেমন কার্যকর হয়নি। আমি $ ("[স্থানধারক]") নির্বাচকটির চারপাশে অতিরিক্ত উদ্ধৃতিগুলি সরিয়েছি এবং এটি ভাল ছিল।
তালি টাইমস

1
সেই লিঙ্কের সমাধানটি ওয়েবকিটে স্থানীয় সমর্থন অনুসারে পাসওয়ার্ড বাক্সগুলি পরিচালনা করে না
geedubb

1
আপনি যে লিঙ্কটি দিয়েছেন তা সত্যিই খুব ভালভাবে কাজ করে - পাসওয়ার্ড বাদে এটি ট্রিট করে এবং সেটআপ করা সহজ হতে পারে না
hobiley

1
লিঙ্কটি একটি দুর্দান্ত ফিক্স
পিক্সেলোমো

উত্তর:


89

আপনি এই jQuery প্লাগইন ব্যবহার করতে পারেন: https://github.com/mathiasbynens/jquery- স্থানধারক

তবে আপনার লিঙ্কটিও একটি ভাল সমাধান বলে মনে হচ্ছে।


2
প্রশ্নে প্রস্তাবিত লিঙ্কটি আমার পক্ষে কার্যকর হয়নি; এটি ফর্ম জমা দেওয়ার ক্ষেত্রে সমস্যা ছিল। এই উত্তরের জন্য আপনি যে সমাধানটি সমাধানের পরামর্শ দিয়েছেন সেটি অনেক বেশি দৃust় এবং একটি ট্রিট কাজ করেছে।
জনি হোয়াইট

প্রকৃতপক্ষে আমি এটি চেষ্টা করেছিলাম এবং এটি ভাল কাজ করে - তবে আমি কোনও ফর্ম এবং পাসওয়ার্ড ক্ষেত্রের সাথে একটি লাইটবক্স লোড করার সাথে সাথে সমস্ত কিছু কাজ করে তবে পাসওয়ার্ড ক্ষেত্র নয় - এটি খালি খালি।
জুরিক

6
আমার আই 8 পাসওয়ার্ড
প্লেসোল্ডার

আমি ie8 এ দেখতে পাচ্ছি না। আমি IE8 এ যখন ক্ষেত্রগুলির উপরে কিছু পাঠ্য শো করে এটির চারপাশে কাজ করেছি।
jhawes

jQuery- স্থানধারক অন্যরকম আচরণ করে। ব্যবহারকারী যখন ক্ষেত্রধারীদের জন্য ফায়ারফক্সে স্বাভাবিক আচরণের মতো মাঠে কিছু লিখতে শুরু করে তার পরিবর্তে ফোকাসের স্থানধারকটিকে সরিয়ে দেয়।
সুপার্টনস্কি

89

আপনি এই পলিফিলগুলির যে কোনও একটি ব্যবহার করতে পারেন:

এই স্ক্রিপ্টগুলি placeholderব্রাউজারগুলিতে এট্রিবিউটটির জন্য সমর্থন যোগ করবে যা এটি সমর্থন করে না, এবং তাদের jQuery প্রয়োজন হয় না!


4
আমি এটি উত্সাহিত করেছি কারণ আমি একটি নন-জিকুরি সমাধানের ধারণাটি পছন্দ করি তবে এই মুহুর্তে এই কোডটির আইই 8 তে সমস্যা রয়েছে তাই এটি আমার পক্ষে উপযুক্ত নয়। github.com/jamesallardice/Placeholders.js/issues/17
ড্যান

3
এই সমাধানটি পাসওয়ার্ড বাক্সগুলি হ্যান্ডেল করে না
Jurik

2
@ জুরিক আমি একটি অতিরিক্ত পলিফিল যুক্ত করেছি - আমি আশা করি এটি সাহায্য করবে।
স্টারবিয়াম্রেনবোলাব

1
এমনকি এই প্লাগইনটির পরিবেশকও
জুরিক

পাসওয়ার্ড ক্ষেত্রটি এখনও আইই 8 তে কাজ করে না। গৃহীত উত্তর লিঙ্কটি পাসওয়ার্ডের ক্ষেত্রে IE8 তে কাজ করছে বলে মনে হচ্ছে।
সুসি

24

$ .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>

2
এটি একটি
কবজির

আপনি যদি ভালভাবে পড়ে থাকেন তবে @vsync না আমি বললাম প্লাগইন, বহুবচন, বেশিরভাগ অপশন আমি খুঁজে পেয়েছি যে আপনি কয়েকটি লাইন বনাম টন কোড সহ একাধিক ফাইল ব্যবহার করতে হবে। আপনি কি কিছুটা অহংকারী নন, এবং কীভাবে এই মন্তব্য উত্তরটি উন্নত করে
লেমনকুল

এটি সত্যই ব্যবহার করা উচিত নয়। এটি jQuery অভ্যন্তরীণ ব্যবহারের জন্য এবং যে কোনও সময় মুছে ফেলা হতে পারে। api.jquery.com/category/deprecated/deprecated-1.9
উইল

3

আপনি যদি 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. এইচটিএমএল 5 পলিফিলস - স্থানধারক বিভাগে যান

3
এই উত্তরটি কার্যকর হয়, তবে সম্পূর্ণ কার্যকারিতার জন্য আপনাকে লিঙ্কটি অনুসরণ করতে হবে। এখানে একক কোডটি কাজ করবে না।
হক্কি

1
ofc এটি কাজ করবে না, এটি একটি উপহাস কোড! আপনি কেন বারবার একই "ফর্ম" এর জন্য আবদ্ধ হন submit? জমা দেওয়ার ইভেন্টটির কোনও কিছুর সাথে সম্পর্ক আছে
vsync

আইআই 8-তে আমি যদি স্থানধারক পাঠকের মতো একই পাঠ্যটি টাইপ করি তবে কি হবে?
বিমল দাস

3

আমার চেষ্টা করা বেশ কয়েকটি প্লাগইনগুলির সাথে আমার সামঞ্জস্যতার সমস্যা ছিল, এটি আমার কাছে পাঠ্য ইনপুটগুলিতে স্থানধারীদের সমর্থন করার সহজতম উপায় বলে মনে হচ্ছে:

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"));
        }
    });
}

এটি আই 9 এর জন্য সমর্থন করছে?
ভিকু

2
$(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("");
                }
            })
        });
    }
});

এটা চেষ্টা কর


1

আমি এটি ব্যবহার করি, এটি কেবল জাভাস্ক্রিপ্ট।

আমার কাছে সহজেই একটি মান সহ একটি ইনপুট উপাদান থাকে এবং ব্যবহারকারী যখন ইনপুট উপাদানটিতে ক্লিক করে, এটি এটিকে কোনও মান ছাড়াই একটি ইনপুট উপাদানে পরিবর্তন করে।

আপনি সহজেই সিএসএস ব্যবহার করে পাঠ্যের রঙ পরিবর্তন করতে পারেন। প্লেসহোল্ডারের রঙ হ'ল # আইইনপুট আইডির রঙ এবং আপনার টাইপ করা পাঠ্যটি যে রঙ হবে তা আইডি # ইমেলের রঙ। GetElementsByClassName ব্যবহার করবেন না , কারণ IE এর যে সংস্করণগুলি কোনও স্থানধারককে সমর্থন করে না, সেগুলি getElementsByClassName সমর্থন করে না!

আপনি পাঠ্য আসল পাসওয়ার্ড ইনপুট প্রকার সেট করে একটি পাসওয়ার্ড ইনপুট মধ্যে একটি স্থানধারক ব্যবহার করতে পারেন।

টিঙ্কার: http://tinker.io/4f7c5/1 - জেএসফিডাল সার্ভারগুলি ডাউন!

*আমার অদক্ষ ইংরেজির জন্য আমি দুঃখিত

অবশ্যই 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>

3
ক্ষেত্রটি ফাঁকা থাকলে এবং ফোকাস হারিয়ে গেলে স্থানধারককে ফিরে আসতে হবে
ক্রিস প্র্যাট

1

অন্যদের অবতরণ এখানে। এটিই আমার পক্ষে কাজ করেছে:

//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('');
        }
    })
});

এটি আপনার স্ক্রিপ্ট.জেএস ফাইলটিতে যুক্ত করুন। Http://www.hagenburger.net/BLOG/HTML5- ইনপুট- স্থানধারক- ফিক্স- উইথ- jQuery.html এর সৌজন্যে


0

যেহেতু বেশিরভাগ সমাধানগুলিতে 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'));
    }

}

আমি স্বীকার করি যে এটি অন্যের চেয়ে কিছুটা বেশি দেখায় তবে এটি ঠিক আছে। __ স্থানধারক স্থানধারক পাঠ্যের রঙ অভিনব করার জন্য একটি সিসি -শ্রেণি।

আমি ব্যবহৃত fix_placeholder মধ্যে window.addEvent ( 'domready', ... এবং পপআপ মত কোন additinally যোগ কোডের জন্য।

আশা করি এটা আপনার ভালো লেগেছে.

আন্তরিক শুভেচ্ছা.



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

0

নীচের কোড যুক্ত করুন এবং এটি সম্পন্ন হবে।

<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.plholder.1.3.zip থেকে সম্পূর্ণ কোড এবং ডেমো ডাউনলোড করুন


0

এখানে একটি জাভাস্ক্রিপ্ট ফাংশন রয়েছে যা আই 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>


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

b .browser.msie আর সমর্থিত নয়। পরিবর্তে বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করে দেখুন।
আহ্বান করুন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.