Add detect support pseudo class
Opened this issue · 2 comments
boggddan commented
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
sesubash commented
@boggddan sounds good. PR is welcome. Also, would prefer ES5 code for browser compatibility at this point of time :).
Kravimir commented
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).