IE8 ve 9'da yer tutucu özelliği nasıl desteklenir

Küçük bir sorunum var, placeholdergiriş kutularının özniteliği IE 8-9'da desteklenmiyor.

Projemde bu desteği sağlamanın en iyi yolu nedir (ASP Net). JQuery kullanıyorum. Bunun için başka harici araçlar kullanmam gerekiyor mu?

Mı http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html iyi bir çözüm?

Bu jQuery eklentisini kullanabilirsiniz: https://github.com/mathiasbynens/jquery-placeholder

Ancak bağlantınız da iyi bir çözüm gibi görünüyor.

Bu çoklu dolgulardan herhangi birini kullanabilirsiniz:

• https://github.com/jamesallardice/Placeholders.js (şifre alanlarını desteklemez)
• https://github.com/chemerisuk/better-placeholder-polyfill

Bu komut dosyaları, placeholderonu desteklemeyen tarayıcılarda öznitelik için destek ekler ve jQuery gerektirmezler!

$ .Browser.msie kullanmak zorunda ... Artık son JQuery üzerinde değil $ .support

aşağıdaki gibi:

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

jquery kullanırsanız, bunu yapabilirsiniz. Bu siteden Jquery ile Yer Tutucu

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

bunlar alternatif bağlantılar

1. Yer tutucu jquery kitaplığı
2. HTML5 çoklu dolgular - yer tutucu bölümüne gidin

Denediğim birkaç eklentiyle uyumluluk sorunları yaşadım, bu bana metin girişlerinde yer tutucuları desteklemenin en basit yolu gibi görünüyor:

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

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

bunu dene

Ben bunu kullanıyorum, sadece Javascript.

Sadece bir değeri olan bir girdi elemanım var ve kullanıcı girdi elemanına tıkladığında, onu değeri olmayan bir girdi elemanına değiştiriyor.

CSS kullanarak metnin rengini kolayca değiştirebilirsiniz. Yer tutucunun rengi #IEinput kimliğindeki renktir ve yazdığınız metnin rengi # e-posta kimliğindeki renktir. Etmeyin Yer tutucu desteği olmayan IE sürümleri getElementsByClassName ya desteklemediğinden, getElementsByClassName kullanın!

Orijinal parola girişinin türünü metne ayarlayarak parola girişinde bir yer tutucu kullanabilirsiniz.

Tinker: http://tinker.io/4f7c5/1 - JSfiddle sunucuları çalışmıyor!

* kötü ingilizcem için özür dilerim

JAVASCRIPT

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

HTML

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

Buraya inen diğerleri için. Bu benim için çalıştı:

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

Bunu script.js dosyanıza eklemeniz yeterli. Http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html'nin izniyle

Çoğu çözüm jQuery kullandığından veya olmasını istediğim kadar tatmin edici olmadığından mootools için kendime bir pasaj yazdım.

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

}

Diğerlerinden biraz daha fazla göründüğünü itiraf ediyorum ama iyi çalışıyor. __placeholder , yer tutucu metnin rengini güzelleştirmek için bir ccs sınıfıdır.

Kullandığım fix_placeholder içinde window.addEvent ( 'domready' ... ve pop-up gibi herhangi additinally eklendi kodu için.

Umarım beğenirsin.

Saygılarımla.

Bu bağlantının kodunu kullandım http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

Ancak tarayıcı tespitinde kullandım:

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

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

Aşağıdaki kodu ekleyin ve yapılacaktır.

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

Tam kodu ve demoyu https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip adresinden indirin

İşte IE 8 ve altı için yer tutucular oluşturacak ve parolalar için de çalışan bir javascript işlevi:

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

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