Поддръжка на HTML5 контейнер

var placeholderSupported = ( 'placeholder' in document.createElement('input') );

Променливата placeholderSupported ще бъде true, ако се поддържа първоначално. В противен случай ще бъде зададено на false.

http://diveinto.html5doctor.com/everything.html#placeholder

return 'placeholder' in document.createElement('input');

Възможно е обаче приставката jQuery, която използвате, вече да проверява за собствена поддръжка - може да не трябва да правите това сами.

Ако искате да включите библиотеки на трети страни като Modernizr и yepnope.js, наистина е лесно да тествате за поддръжка и постепенно да подобрявате, елегантно да понижавате.

Това е добра статия с много ресурси, които трябва да помогнат: http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

За да получите обща представа, отидете на:

http://caniuse.com/#search=placeholder

И за да тествате в браузъра, можете да направите:

function supportsPlaceholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}

Взех назаем от отговора по-горе и го направих така, че да е обратно съвместим с по-стари модерни браузъри, както и с IE --

С кода по-долу се уверете, че сте задали атрибути „стойност“ и „заместител“ за полетата за въвеждане. В моя конкретен случай трябваше да поддържам варианти на IE.

Обяснение -- Ако браузърът поддържа контейнер, въведената стойност се премахва. Ако не, по-старите браузъри ще игнорират атрибутите на контейнера и js по-долу имитира поведението на контейнера по подразбиране. Този скрипт също така ще игнорира всички токени за удостоверяване за CSRF (получаваше грешка, когато стойностите на маркерите за удостоверяване се изчистваха в моите формуляри, причинявайки CSRF предупреждение в моите Rails приложения).

Друг подход за опростяване на самия скрипт е да присвоите клас на всеки вход, който конкретно искате да използвате този скрипт, и съответно да актуализирате истинското изявление (макар че методът по-долу е малко по-сух).

var placeholderSupported = !!( 'placeholder' in document.createElement('input') );

if (placeholderSupported === true){
    $('input:not([type="submit"], [name="authenticity_token"])').val('');
} else{
    $('input')
      .focus(function() {
            if (this.value === this.defaultValue) {
                this.value = '';
            }
      })
      .blur(function() {
            if (this.value === '') {
                this.value = this.defaultValue;
            }
    });
}