Wprowadź symbole zastępcze dla przeglądarki Internet Explorer

HTML5 wprowadził placeholderatrybut na inputelementach, który umożliwia wyświetlanie wyszarzonego domyślnego tekstu.

Niestety Internet Explorer, w tym IE 9, nie obsługuje tego.

Istnieje już kilka skryptów symulatorów zastępczych. Zwykle działają poprzez umieszczenie domyślnego tekstu w polu wejściowym, nadanie mu szarego koloru i usunięcie go ponownie, gdy tylko zaznaczysz pole wejściowe.

Wadą tego podejścia jest to, że tekst zastępczy znajduje się w polu wejściowym. A zatem:

1. skrypty nie mogą łatwo sprawdzić, czy pole wejściowe jest puste
2. przetwarzanie po stronie serwera musi sprawdzać wartość domyślną, aby nie wstawiać symbolu zastępczego do bazy danych.

Chciałbym mieć rozwiązanie, w którym tekst zastępczy nie znajduje się w samym wejściu.

Patrząc na sekcję „Formularze internetowe: symbol zastępczy danych wejściowych” w HTML5 Cross Browser Polyfills , jednym z nich był jQuery-html5-placeholder .

Wypróbowałem wersję demonstracyjną z IE9 i wygląda na to, że otacza ją <input>rozpiętością i nakłada na etykietę tekst zastępczy.

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </span>
</label>

Są tam też inne podkładki, ale nie obejrzałem ich wszystkich. Jeden z nich, Placeholder.js , ogłasza się jako „Brak zależności (więc nie ma potrzeby dołączania jQuery, w przeciwieństwie do większości zastępczych skryptów polyfill)”.

Edycja: dla bardziej zainteresowanych tym, „jak” to „co”, jak utworzyć zaawansowany wypełniacz zastępczy HTML5, który prowadzi przez proces tworzenia wtyczki jQuery, która to robi.

Zobacz również, aby zachować fokus na symbol zastępczy w IE10, aby uzyskać komentarze na temat tego, jak tekst zastępczy znika po aktywowaniu w IE10, który różni się od Firefox i Chrome. Nie jestem pewien, czy istnieje rozwiązanie tego problemu.

Z mojego doświadczenia wynika, że ​​najlepszy jest https://github.com/mathiasbynens/jquery-placeholder (zalecane przez html5please.com ). http://afarkas.github.com/webshim/demos/index.html ma również dobre rozwiązanie wśród znacznie obszerniejszej biblioteki wypełnień.

Dzięki implementacji jQuery możesz ŁATWO usunąć wartości domyślne, gdy nadejdzie czas na przesłanie. Poniżej przykład:

$('#submit').click(function(){
   var text = this.attr('placeholder');
   var inputvalue = this.val();  // you need to collect this anyways
   if (text === inputvalue) inputvalue = "";

   // $.ajax(...  // do your ajax thing here

});

Wiem, że szukasz nakładki, ale może wolisz łatwość tej trasy (teraz wiedząc, co napisałem powyżej). Jeśli tak, to napisałem to dla swoich własnych projektów i działa naprawdę fajnie (wymaga jQuery) i zajmuje tylko kilka minut, aby wdrożyć całą witrynę. Na początku oferuje szary tekst, jasnoszary, gdy jest ostry, i czarny podczas pisania. Oferuje również tekst zastępczy, gdy pole wejściowe jest puste.

Najpierw skonfiguruj formularz i umieść atrybuty zastępcze w tagach wejściowych.

<input placeholder="enter your email here">

Po prostu skopiuj ten kod i zapisz go jako placeholder.js.

(function( $ ){

   $.fn.placeHolder = function() {  
      var input = this;
      var text = input.attr('placeholder');  // make sure you have your placeholder attributes completed for each input field
      if (text) input.val(text).css({ color:'grey' });
      input.focus(function(){  
         if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){     
            input.val("").css({ color:'black' });  
         });
      });
      input.blur(function(){ 
         if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
      }); 
      input.keyup(function(){ 
        if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
            input.val("").css({ color:'black' });
        });               
      });
      input.mouseup(function(){
        if (input.val() === text) input.selectRange(0,0); 
      });   
   };

   $.fn.selectRange = function(start, end) {
      return this.each(function() {
        if (this.setSelectionRange) { this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true); 
            range.moveEnd('character', end); 
            range.moveStart('character', start); 
            range.select(); 
        }
      });
   };

})( jQuery );

Używać tylko na jednym wejściu

$('#myinput').placeHolder();  // just one

Oto, w jaki sposób zalecam wdrożenie go we wszystkich polach wejściowych w witrynie, gdy przeglądarka nie obsługuje atrybutów zastępczych HTML5:

var placeholder = 'placeholder' in document.createElement('input');  
if (!placeholder) {      
  $.getScript("../js/placeholder.js", function() {   
      $(":input").each(function(){   // this will work for all input fields
        $(this).placeHolder();
      });
  });
} 

Po wypróbowaniu kilku sugestii i zauważeniu problemów w IE, oto ten, który działa:

https://github.com/parndt/jquery-html5-placeholder-shim/

Co mi się podobało - po prostu dołącz plik js. Nie ma potrzeby inicjowania tego ani niczego.

• Działa tylko z IE9 +

Poniższe rozwiązanie wiąże się z wejściowymi elementami tekstowymi z atrybutem symbolu zastępczego. Emuluje zachowanie symbolu zastępczego tylko dla IE i czyści pole wartości danych wejściowych po przesłaniu, jeśli nie zostanie zmienione.

Dodaj ten skrypt, a IE wydaje się obsługiwać symbole zastępcze HTML5.

  $(function() {
  //Run this script only for IE
  if (navigator.appName === "Microsoft Internet Explorer") {
    $("input[type=text]").each(function() {
      var p;
     // Run this script only for input field with placeholder attribute
      if (p = $(this).attr('placeholder')) {
      // Input field's value attribute gets the placeholder value.
        $(this).val(p);
        $(this).css('color', 'gray');
        // On selecting the field, if value is the same as placeholder, it should become blank
        $(this).focus(function() {
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
         // On exiting field, if value is blank, it should be assigned the value of placeholder
        $(this).blur(function() {
          if ($(this).val() === '') {
            return $(this).val(p);
          }
        });
      }
    });
    $("input[type=password]").each(function() {
      var e_id, p;
      if (p = $(this).attr('placeholder')) {
        e_id = $(this).attr('id');
        // change input type so that the text is displayed
        document.getElementById(e_id).type = 'text';
        $(this).val(p);
        $(this).focus(function() {
          // change input type so that password is not displayed
          document.getElementById(e_id).type = 'password';
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
        $(this).blur(function() {
          if ($(this).val() === '') {
            document.getElementById(e_id).type = 'text';
            $(this).val(p);
          }
        });
      }
    });
    $('form').submit(function() {
      //Interrupt submission to blank out input fields with placeholder values
      $("input[type=text]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
          $(this).val('');
        }
      });
     $("input[type=password]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
           $(this).val('');
        }
      });
    });
  }
});

Proponuję prostą funkcję:

function bindInOut(element,value)
{
    element.focus(function()
    {
        if(element.val() == value) element.val('');         
    }).
    blur(function()
    {
        if(element.val() == '') element.val(value);
    });

    element.blur();
}

Aby go użyć, nazwij to w ten sposób:

bindInOut($('#input'),'Here your value :)');

Korzystając z tej metody znalazłem dość proste rozwiązanie:

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

to hack do jQuery i doskonale sprawdził się w moich projektach

Możesz użyć :

var placeholder = 'search  here';

$('#search').focus(function(){
    if ($.trim($(this).val()) ===  placeholder){
        this.value ='';
    }
}).blur(function(){
    if ($.trim($(this).val()) ===  ''){
        this.value = placeholder;
    }
}).val(placeholder);

Tak proste:

$(function() {
    ...

    var element = $("#selecter")
    if(element.val() === element.attr("placeholder"){

        element.text("").select().blur();
    }

    ...
});

Napisałem wtyczkę jquery, aby rozwiązać ten problem .. to nic nie kosztuje ..

Katalog JQuery:

http://plugins.jquery.com/project/kegles-jquery-placeholder

Witryna: www.kegles.com.br/jquery-placeholder/

Wymyśliłem prosty skrypt zastępczy JQuery, który pozwala na niestandardowy kolor i używa innego zachowania polegającego na czyszczeniu danych wejściowych, gdy jest aktywny. Zastępuje domyślny symbol zastępczy w przeglądarkach Firefox i Chrome i dodaje obsługę IE8.

// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () { 
    var textColor = '#777777'; //custom color

    $('[placeholder]').each(function() {
        (this).attr('tooltip', $(this).attr('placeholder')); //buffer

        if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
            $(this).css('color', textColor).css('font-style','italic');
            $(this).val($(this).attr('placeholder')); //IE8 compatibility
        }

        $(this).attr('placeholder',''); //disable default behavior

        $(this).on('focus', function() {
            if ($(this).val() === $(this).attr('tooltip')) {
                $(this).val('');
            }
        });

        $(this).on('keydown', function() {
            $(this).css('font-style','normal').css('color','#000');
        });

        $(this).on('blur', function() {
            if ($(this).val()  === '') {
                $(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
            }
        });
    });
});

Placeholdr to superlekki wypełniacz jQuery, który napisałem. Jest mniej niż 1 KB zminimalizowane.

Upewniłem się, że ta biblioteka odnosi się do obu Twoich obaw:

1. Placeholdr rozszerza funkcję jQuery $ .fn.val (), aby zapobiec nieoczekiwanym wartościom zwracanym, gdy tekst jest obecny w polach wejściowych w wyniku Placeholdr. Jeśli więc będziesz trzymać się interfejsu API jQuery w celu uzyskania dostępu do wartości pól, nie będziesz musiał niczego zmieniać.

2. Placeholdr nasłuchuje przesłanych formularzy i usuwa tekst zastępczy z pól, dzięki czemu serwer po prostu widzi pustą wartość.

Ponownie, moim celem w przypadku Placeholdr jest zapewnienie prostego rozwiązania problemu zastępczego. Daj mi znać na Githubie, jeśli jest coś jeszcze, co mogłoby Cię zainteresować wsparciem Placeholdr.

Aby wstawić wtyczkę i sprawdzić, czy ie działa idealnie jquery.placeholder.js

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.placeholder.js"></script>
    <script>
        // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
        // $.fn.hide = function() { return this; }
        // Then uncomment the last rule in the <style> element (in the <head>).
        $(function() {
            // Invoke the plugin
            $('input, textarea').placeholder({customClass:'my-placeholder'});
            // That’s it, really.
            // Now display a message if the browser supports placeholder natively
            var html;
            if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
            } else if ($.fn.placeholder.input) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
            }
            if (html) {
                $('<p class="note">' + html + '</p>').insertAfter('form');
            }
        });
    </script>

Oto czysta funkcja javascript (bez użycia jquery), która utworzy symbole zastępcze dla IE 8 i starszych i działa również dla haseł. Odczytuje atrybut zastępczy HTML5 i tworzy element span za elementem formularza i sprawia, że ​​tło elementu formularza jest przezroczyste:

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

UWAGA: autor tego wypełnienia twierdzi, że "działa w prawie każdej przeglądarce, jaką możesz sobie wyobrazić", ale zgodnie z komentarzami nie jest to prawdą dla IE11, jednak IE11 ma natywne wsparcie, podobnie jak większość nowoczesnych przeglądarek

Placeholder.js to najlepszy wypełniacz zastępczy, jaki widziałem, jest lekki, nie zależy od JQuery, obejmuje inne starsze przeglądarki (nie tylko IE) i ma opcje ukrywania przy wprowadzaniu i jednorazowego uruchamiania.

używam jquery.placeholderlabels . Jest oparty na tym i można go tutaj zaprezentować .

działa w ie7, ie8, ie9.

zachowanie naśladuje bieżące zachowanie przeglądarek Firefox i Chrome - gdzie tekst „zastępczy” pozostaje widoczny na fokusie i znika dopiero po wpisaniu czegoś w polu.

Stworzyłem własną wtyczkę jQuery po tym, jak byłem sfrustrowany, że istniejące podkładki ukrywają symbol zastępczy w skupieniu, co tworzy gorsze wrażenia użytkownika, a także nie pasuje do sposobu, w jaki Firefox, Chrome i Safari sobie z tym radzą. Dzieje się tak zwłaszcza w przypadku, gdy chcesz, aby dane wejściowe były skupione po pierwszym załadowaniu strony lub wyskakującego okienka, a jednocześnie nadal wyświetlał symbol zastępczy do momentu wprowadzenia tekstu.

https://github.com/nspady/jquery-placeholder-labels/