Wprowadzanie elementów zastępczych dla przeglądarki Internet Explorer

Najlepsze z mojego doświadczenia 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 bardziej rozbudowanej biblioteki polyfills.

Z implementacją jQuery można łatwo usunąć wartości domyślne, gdy nadszedł 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 własnych projektów i działa naprawdę ładnie (wymaga jQuery) i zajmuje tylko kilka minut, aby zaimplementować dla całej witryny. Oferuje szary tekst na początku, jasnoszary podczas ustawiania ostrości i czarny podczas pisania. Oferuje również tekst zastępczy, gdy pole wejściowe jest puste.

Najpierw skonfiguruj formularz i dołącz atrybuty zastępcze do znaczników wejściowych.

<input placeholder="enter your email here">

Po prostu skopiuj ten kod i zapisz go jako symbol zastępczy.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 );

Do użycia na jednym wejściu

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

W ten sposób polecam zaimplementować go na 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 zobaczeniu problemów w IE tutaj działa:

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

Co mi się podobało - wystarczy załączyć plik js. Nie trzeba tego inicjować.

• działa tylko dla IE9 +

Poniższe rozwiązanie wiąże elementy tekstu wejściowego z atrybutem placeholder. Emuluje zachowanie zastępcze tylko dla IE i czyści pole wartości wejściowej podczas przesyłania, jeśli nie zostanie zmienione.

Dodaj ten skrypt, a IE będzie obsługiwać placeholdery 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();
}

I aby go użyć, nazwij go w ten sposób:

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

Znalazłem dość proste rozwiązanie przy użyciu tej metody:

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

Jest to hack jquery, i działał idealnie na 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);

Proste jak to:

$(function() {
    ...

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

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

    ...
});

Napisałem wtyczkę jquery, aby rozwiązać ten problem.. jest za darmo..

Katalog JQuery:

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

Strona: 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 czyszczenia wejść, gdy jest skupiony. Zastępuje domyślny symbol zastępczy w Firefoksie 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 jest super lekki drop-in placeholder jQuery polyfill, który napisałem. To mniej niż 1 KB minifigurki.

Upewniłem się, że ta biblioteka rozwiąże oba Twoje obawy:

1. Placeholdr rozszerza jQuery $.fn.funkcja val () zapobiegająca nieoczekiwanemu zwracaniu wartości, gdy tekst jest obecny w polach wejściowych w wyniku funkcji Placeholdr. Jeśli więc trzymasz się interfejsu API jQuery, aby uzyskać dostęp do wartości pól, nie musisz zmieniać rzecz.

2. Placeholdr nasłuchuje przesyłanych formularzy i usuwa tekst zastępczy z pól, tak że serwer po prostu widzi pustą wartość.

Ponownie, moim celem z Placeholdr jest zapewnienie prostego rozwiązania problemu zastępczego. Daj mi znać na Githubie, jeśli jest coś jeszcze, co chciałbyś mieć wsparcie zastępcze.

Aby wstawić wtyczkę i sprawdzić, czy ie jest idealnie działanejjquery.miejsce.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>

Tutaj jest czysta funkcja javascript (nie jQuery potrzebne), który utworzy symbole zastępcze dla IE 8 i poniżej 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 polyfill twierdzi, że "działa w prawie każdej przeglądarce, którą możesz sobie wyobrazić", ale zgodnie z komentarzami, które nie są prawdziwe dla IE11, jednak IE11 ma natywne wsparcie, podobnie jak większość nowoczesnych przeglądarek

Zastępcze.js jest najlepszym polyfill zastępczym, jaki widziałem, jest lekki, nie zależy od JQuery, obejmuje inne starsze przeglądarki (nie tylko IE)i ma opcje dla Hide-on-input I run-once zastępczych.

Używam jquery.placeholderlabels . Jest oparty na to i może być demoed Tutaj.

Działa w ie7, ie8, ie9.

Zachowanie naśladuje bieżące zachowanie Firefoksa i chrome - gdzie tekst "zastępczy" pozostaje widoczny na fokusie i znika tylko po wpisaniu czegoś w polu.

Stworzyłem własną wtyczkę jQuery po tym, jak stał się sfrustrowany, że istniejące shims ukryje symbol zastępczy na Focusie, co tworzy gorsze wrażenia użytkownika, a także nie pasuje do tego, jak obsługuje to Firefox, Chrome i Safari. Jest to szczególnie ważne, jeśli chcesz, aby dane wejściowe były skupione podczas pierwszego załadowania strony lub wyskakującego okienka, a jednocześnie pokazywały symbol zastępczy do czasu wprowadzenia tekstu.

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