Element zastępczy HTML5 IE9 - w jaki sposób ludzie to osiągają?

Question

Próbuję użyć atrybutu placeholder="xxx" w mojej aplikacji internetowej i nie chcę mieć specjalnego wyglądu dla IE9. Czy ludzie mogą rzucić kilka dobrych sugestii dotyczących osiągnięcia tej funkcji w IE9?

Znalazłem parę linków tutaj, ale żaden z sugerowanych skryptów nie był wystarczający ... a odpowiedzi były od połowy 2011 roku, więc pomyślałem, że być może istnieje lepsze rozwiązanie. Być może z powszechnie przyjętą wtyczką jQuery? Nie chcę używać niczego, co wymaga uciążliwego kodu, takiego jak wymaganie określonej klasy css lub czegoś podobnego.

Dzięki.

EDYCJA - Potrzebuję tego również do pracy w polach wprowadzania hasła.

// the below snippet should work, but isn't. 
$(document).ready(function() { 
    initPlaceholders()(); 
} 

function initPlaceholders() { 
     $.support.placeholder = false; 
var test = document.createElement('input'); 
if ('placeholder' in test) { 
    $.support.placeholder = true; 
    return function() { } 
} else { 
    return function() { 
     $(function() { 
      var active = document.activeElement; 
      $('form').delegate(':text, :password', 'focus', function() { 
       var _placeholder = $(this).attr('placeholder'), 
        _val = $(this).val(); 
       if (_placeholder != '' && _val == _placeholder) { 
        $(this).val('').removeClass('hasPlaceholder'); 
       } 
      }).delegate(':text, :password', 'blur', function() { 
       var _placeholder = $(this).attr('placeholder'), 
        _val = $(this).val(); 
       if (_placeholder != '' && (_val == '' || _val == _placeholder)) { 
        $(this).val(_placeholder).addClass('hasPlaceholder'); 
       } 
      }).submit(function() { 
       $(this).find('.hasPlaceholder').each(function() { $(this).val(''); }); 
      }); 
      $(':text, :password').blur(); 
      $(active).focus(); 
     }); 
    } 
} 
} 

Answer 1

Właśnie zbadaliśmy to samo. Zdecydowaliśmy się na ponowne użycie this gist, przez Aaron McCall, po wprowadzeniu drobnych zmian. Główną zaletą jest to, że jest to prosty, łatwy do zrozumienia kod:

1. Usuń części jądra i setup_placeholders. Po prostu zadzwoń natychmiast w anonimowej funkcji.

2. Dodaj var przed test.

W przypadku przeglądarek obsługujących placeholder po prostu wraca do tego. Obsługuje również nowe elementy wejściowe (zwróć uwagę na użycie delegate) w istniejących formularzach. Ale nie obsługuje dynamicznych nowych elementów formularza. Prawdopodobnie można to zmienić za pomocą jQuery.on.

Jeśli nie podoba ci się ten, możesz użyć jednego z nich here. Jednak niektóre z nich są zbyt skomplikowane lub mają wątpliwe decyzje dotyczące projektowania, takie jak wykrywanie nowych elementów, takie jak setTimeout.

Zauważ, że musi użyć dwóch par parens, ponieważ dzwonisz anonimową funkcję, a następnie wywołaniu funkcji zwracany (może to być uwzględnione się inaczej):

(function() { 
    // ... 
})()(); 

Answer 2

Oto plugin jQuery, które działa również z polami hasła. Nie jest tak malutki jak kod sugerowany przez Matthew, ale ma kilka dodatkowych poprawek. Z powodzeniem używam tego samego razem z H5Validate.

http://webcloud.se/code/jQuery-Placeholder/

Answer 3

Napisałem jQuery plugin jakiś czas temu, który dodaje wsparcie zastępczy do dowolnej przeglądarki, która nie obsługuje go i nic nie robi w tych, które zrobić.

Placeholder Plugin