sesubash/placeholder-shown-polyfill

Add detect support pseudo class

Opened this issue · 2 comments

Hello, thank for you pollyfill.
Maybe you can add support to the polyfill browser properties.

(() => {
  const isCheck = () => {
    try {
      document.querySelector(':placeholder-shown');
    } catch (error) {
      if (error instanceof DOMException) return false;
      throw new Error(error);
    }
    return true;
  };

  const changeClass = el => el.classList[el.value ? 'remove' : 'add']('placeholder-shown');

  const placeholderShownPolyfill = () => {
    document.querySelectorAll('[placeholder]').forEach(el => {
      changeClass(el);
      ['change', 'keyup'].forEach(type => {
        el.addEventListener(type, ({ target }) => changeClass(target));
      });
    });
  };

  if (!isCheck()) window.addEventListener('load', placeholderShownPolyfill);
})();

Thanks

@boggddan sounds good. PR is welcome. Also, would prefer ES5 code for browser compatibility at this point of time :).

I've issued a PR for some changes I made which include adding a support check so event handlers are only added to fields in browsers that don't support any of the 3 pseudo-classes (:placeholder-shown, :-moz-placeholder, and :-ms-input-placeholder).