Unterstützung von Platzhalterattributen in IE8 und 9

Ich habe ein kleines Problem, das placeholderAttribut für Eingabefelder wird in IE 8-9 nicht unterstützt.

Was ist der beste Weg, um diese Unterstützung in meinem Projekt (ASP Net) zu machen. Ich benutze jQuery. Muss ich dafür andere externe Tools verwenden?

Ist http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html eine gute Lösung?

Sie können dieses jQuery-Plugin verwenden: https://github.com/mathiasbynens/jquery-placeholder

Ihr Link scheint aber auch eine gute Lösung zu sein.

Sie können eine dieser Polyfüllungen verwenden:

• https://github.com/jamesallardice/Placeholders.js (unterstützt keine Passwortfelder)
• https://github.com/chemerisuk/better-placeholder-polyfill

Diese Skripte unterstützen das placeholderAttribut in Browsern, die es nicht unterstützen, und erfordern keine jQuery!

Die $ .Browser.msie ist nicht mehr auf der neuesten JQuery ... Sie müssen die $ .support verwenden

Wie unten:

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

Wenn Sie jquery verwenden, können Sie dies tun. von dieser Seite Platzhalter mit Jquery

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

Dies sind die alternativen Links

1. Platzhalter-Abfragebibliothek
2. HTML5-Polyfills - gehen Sie zum Platzhalterabschnitt

Ich hatte Kompatibilitätsprobleme mit mehreren Plugins, die ich ausprobiert habe. Dies scheint mir die einfachste Möglichkeit zu sein, Platzhalter bei Texteingaben zu unterstützen:

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

Versuche dies

Ich benutze dieses eine, es ist nur Javascript.

Ich habe einfach ein Eingabeelement mit einem Wert, und wenn der Benutzer auf das Eingabeelement klickt, ändert es es in ein Eingabeelement ohne Wert.

Sie können die Farbe des Textes einfach mit CSS ändern. Die Farbe des Platzhalters ist die Farbe in der ID #IEinput, und die Farbe Ihres eingegebenen Textes ist die Farbe in der ID #email. Sie nicht verwenden getElementsByClassName, da die IE - Versionen, die keine Platzhalter unterstützen, nicht unterstützen getElementsByClassName entweder!

Sie können einen Platzhalter in einer Passworteingabe verwenden, indem Sie den Typ der ursprünglichen Passworteingabe auf Text setzen.

Tinker: http://tinker.io/4f7c5/1 - JSfiddle-Server sind ausgefallen!

*Entschuldigung für mein schlechtes Englisch

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>

Für andere, die hier landen. Das hat bei mir funktioniert:

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

Fügen Sie dies einfach in Ihre script.js-Datei ein. Mit freundlicher Genehmigung von http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Da die meisten Lösungen jQuery verwenden oder nicht so zufriedenstellend sind, wie ich es mir gewünscht habe, habe ich mir einen Ausschnitt für mootools geschrieben.

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

}

Ich gebe zu, dass es ein bisschen MEHR aussieht als andere, aber es funktioniert gut. __placeholder ist eine ccs-Klasse, um die Farbe des Platzhaltertextes hervorzuheben.

Ich habe den fix_placeholder in window.addEvent ('domready', ... und für jeden zusätzlich hinzugefügten Code wie Popups verwendet.

Hoffe du magst es.

Mit freundlichen Grüßen.

Ich habe den Code dieses Links verwendet: http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

Aber bei der Browsererkennung habe ich verwendet:

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'}" />

Fügen Sie den folgenden Code hinzu und es wird getan.

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

Laden Sie den vollständigen Code und die Demo von https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip herunter

Hier ist eine Javascript-Funktion, die Platzhalter für IE 8 und darunter erstellt und auch für Kennwörter funktioniert:

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