Jak obsługiwać atrybut zastępczy w IE8 i 9

132

Mam mały problem, placeholderatrybut pól wejściowych nie jest obsługiwany w IE 8-9.

Jaki jest najlepszy sposób, aby to wsparcie w moim projekcie (ASP Net). Używam jQuery. Czy muszę do tego użyć innych zewnętrznych narzędzi?

Czy http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html to dobre rozwiązanie?

Arbejdsglæde
źródło
7
Kącik pedanta: to atrybut, a nie tag. Znacznik ma wokół siebie ostre nawiasy (jak <input>); atrybut to para klucz-wartość wewnątrz ostrych nawiasów (jak placeholder="This is an attribute value"). Pozostaw pytanie tak, jak jest, aby przyszli ludzie, którzy zadają to samo pytanie, mogli je znaleźć.
Paul D. Waite,
2
Ten link nie działał tak, jak jest. Usunąłem dodatkowe cudzysłowy wokół selektora $ ("[symbol zastępczy]") i było dobrze.
claptimes
1
Rozwiązanie w tym linku również nie obsługuje skrzynek z hasłami zgodnie z natywną obsługą zestawu webkit
geedubb
1
Link, który podałeś, działa bardzo dobrze - oprócz haseł działa świetnie i nie może być prostszy w konfiguracji
hobailey
1
link to świetna poprawka
Pixelomo

Odpowiedzi:

89

Możesz użyć tej wtyczki jQuery: https://github.com/mathiasbynens/jquery-placeholder

Ale twój link wydaje się być również dobrym rozwiązaniem.

czerwony alarm
źródło
2
Link sugerowany w pytaniu nie działał dla mnie; miał problemy z przesłaniem formularza. Rozwiązanie, które zasugerowałeś w tej odpowiedzi, wydaje się o wiele solidniejsze i działało świetnie.
Jonny White,
Właściwie to wypróbowałem i działa dobrze - ale jak tylko ładuję lightbox z formularzem i polem hasła, wszystko działa, ale nie pole hasła - jest po prostu puste.
Jurik
6
w moim symbolu zastępczym hasła IE8 jest kropkami
Mladen Janjetovic
Nie widzę tego też w ie8. Obejrzałem to, po prostu pokazując tekst nad polami w ie8.
jhawes
jQuery-placeholder zachowuje się inaczej. Usuwa symbol zastępczy na fokusie, zamiast gdy użytkownik zaczyna wpisywać coś w polu, jak normalne zachowanie w Firefoksie dla symboli zastępczych.
supertonsky
89

Możesz użyć dowolnego z tych wypełnień:

Te skrypty dodadzą obsługę tego placeholderatrybutu w przeglądarkach, które go nie obsługują i nie wymagają jQuery!

starbeamrainbowlabs
źródło
4
Głosowałem za tym, ponieważ podoba mi się pomysł rozwiązania innego niż jquery, ale w tej chwili ten kod ma problemy w IE8, więc nie jest dla mnie odpowiedni. github.com/jamesallardice/Placeholder.js/issues/17
Dan Searle
3
To rozwiązanie nie obsługuje skrzynek z hasłami
Jurik
2
@Jurik Dodałem dodatkowy polyfill - mam nadzieję, że to pomoże.
starbeamrainbowlabs
1
Nawet dystrybutor tej wtyczki twierdzi, że ta wtyczka nie obsługuje pól haseł w <IE9 github.com/jamesallardice/Placeholder.js/issues/ ...
Jurik
Pole hasła nadal nie działa w iE8. Zaakceptowany link odpowiedzi wydaje się działać w polu hasła ie8.
Susie
24

$ Browser.msie nie jest na najnowszej JQuery już ... trzeba użyć $ Pomocnicze

jak poniżej:

 <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>
azot
źródło
2
to działa jak urok, podoba mi się to bardziej niż dodawanie wtyczek,
wielkie
@vsync nie, jeśli dobrze czytasz. Powiedziałem, że wtyczki, liczba mnoga, większość opcji, które znalazłem, wymaga użycia wielu plików, z mnóstwem kodu, w porównaniu z kilkoma wierszami. czy nie jesteś trochę arogancki i jak ten komentarz poprawia odpowiedź
LemonCool,
To naprawdę nie powinno być używane. Jest to przeznaczone do użytku wewnętrznego jQuery i może zostać usunięte w dowolnym momencie. api.jquery.com/category/deprecated/deprecated-1.9
Will
3

jeśli używasz jquery, możesz to zrobić. z tej witryny Symbol zastępczy z Jquery

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

to są alternatywne linki

  1. Biblioteka zastępcza jquery
  2. Wypełnienia HTML5 - przejdź do sekcji symboli zastępczych
Ravi Gadag
źródło
3
Ta odpowiedź działa, ale musisz skorzystać z łącza, aby uzyskać pełną funkcjonalność. Sam kod nie zadziała.
Hawkee,
1
ofc to nie zadziała, to jest kod szyderczy! dlaczego ciągle wiążesz tę samą „formę” na submitwydarzenie? co ma wspólnego zdarzenie przesyłania
vsync
co się stanie, jeśli wpiszę ten sam tekst, co w tekście zastępczym w IE8 ???
Bimal Das
3

Miałem problemy ze zgodnością z kilkoma wypróbowanymi wtyczkami, wydaje mi się, że jest to najprostszy sposób obsługi symboli zastępczych przy wprowadzaniu tekstu:

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"));
        }
    });
}
Alex Harper
źródło
czy obsługuje IE9?
Viku
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("");
                }
            })
        });
    }
});

Spróbuj tego

Rejeesh Prarath
źródło
1

Używam tego, to tylko JavaScript.

Po prostu mam element wejściowy z wartością, a gdy użytkownik kliknie element wejściowy, zmienia go w element wejściowy bez wartości.

Możesz łatwo zmienić kolor tekstu za pomocą CSS. Kolor symbolu zastępczego jest kolorem z id #IEinput, a kolor wpisanego tekstu to kolor z id #email. Nie używaj getElementsByClassName, ponieważ wersje IE, które nie obsługują symbolu zastępczego, nie obsługują również getElementsByClassName!

Możesz użyć symbolu zastępczego przy wprowadzaniu hasła, ustawiając typ pierwotnego hasła na tekst.

Tinker: http://tinker.io/4f7c5/1 - serwery JSfiddle nie działają!

*Przepraszam za mój zły język angielski

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>
Florislw
źródło
3
Symbol zastępczy powinien wrócić, jeśli pole jest puste, a fokus jest stracony
Chris Pratt.
1

Dla innych lądujących tutaj. Oto, co zadziałało dla mnie:

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

Po prostu dodaj to do swojego pliku script.js. Dzięki uprzejmości http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

JediCate
źródło
0

Ponieważ większość rozwiązań korzysta z jQuery lub nie jest tak satysfakcjonująca, jak sobie tego życzyłem, napisałem dla siebie fragment kodu mootools.

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

}

Wyznaję, że wygląda trochę WIĘCEJ niż inne, ale działa dobrze. __placeholder jest klasą ccs, która nadaje fantazyjny kolor tekstu zastępczego.

Użyłem fix_placeholder w window.addEvent ('domready', ... i dla każdego dodatkowego kodu, takiego jak wyskakujące okienka.

Mam nadzieję że ci się spodoba.

Z poważaniem.

Mario
źródło
0
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />
user3776645
źródło
0

Dodaj poniższy kod i będzie gotowe.

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

Pobierz pełny kod i wersję demonstracyjną ze strony https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip

Mężczyzna
źródło
0

Oto funkcja javascript, która utworzy symbole zastępcze dla IE 8 i starszych i działa również dla haseł:

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

Jeff Baker
źródło
-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>
Ionut Flavius ​​Pogacian
źródło
Plik $ .browser.msie nie jest już obsługiwany. Zamiast tego spróbuj użyć wykrywania funkcji.
zadzwoń