Detect if input placeholder is visible

Question

I'm trying to find a way to detect if an input is currently showing a placeholder.

I know we can test whether or not placeholders are supported in a given browser, which I would use, but that's not what I'm asking here.

The :placeholder-shown pseudo class does exactly what I need, but the support for it is very low. Much lower than the support for placeholders in general. So I'm looking for an alternative method.

Note: The solution cannot rely on whether or not the input has changed or gained a value. Autofilled inputs neither have a technical value, nor have changed. Therefore the solution needs to truly detect the placeholder it'self.

Lump

Answer 1

First, check to see if the placeholder attribute is being used by the element, and then check to see if the value of the input is empty:

function placeholderActive(selector) {
  var el = document.querySelector(selector);
  if (el.getAttribute('placeholder') && el.value === '') {
    return true;
  }
  return false;
}


var a = placeholderActive('#test1'); // false
var b = placeholderActive('#test2'); // false
var c = placeholderActive('#test3'); // false
var d = placeholderActive('#test4'); // true

console.log(a, b, c, d);

<input id="test1" name="test1" value="123">
<input id="test2" name="test2" placeholder="" value="123">
<input id="test3" name="test3" placeholder="Some Placeholder" value="123">
<input id="test4" name="test4" placeholder="Another placeholder" value="">

Belvabelvedere

this check browsers autocomplete: function placeholderActive(selector: string) { const el = document.querySelector(selector) as HTMLInputElement; if ( el && el.getAttribute('placeholder') && !el.value && !(el.matches(':autofill') || el.matches(':-webkit-autofill')) ) { return true; } return false; } – Period

Answer 2

Nowadays, for most browsers we can use :placeholder-shown pseudo-class to detect whether placeholder is shown or not.

function placeholderActive(selector) {
  return !!document.querySelector(selector + ':placeholder-shown');
}
const a = placeholderActive('#test1'); // false
const b = placeholderActive('#test2'); // false
const c = placeholderActive('#test3'); // false
const d = placeholderActive('#test4'); // true

console.log(a, b, c, d);

<input id="test1" name="test1" value="123">
<input id="test2" name="test2" placeholder="" value="123">
<input id="test3" name="test3" placeholder="Some Placeholder" value="123">
<input id="test4" name="test4" placeholder="Another placeholder" value="">

CSS-Tricks: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

CanIUse: https://caniuse.com/#feat=css-placeholder-shown

Armored

Answer 3

Add the required attribute to the input and then use :invalid to select the input that shows the placeholder.

This does not work with input types like email or inputs with a pattern attribute.

Using js is still the best option if you want it to work properly in all cases.

Disembark

Thanks for the reply, but the required method only covers specific use cases, which many forms don't fall within. I'm looking for something less constrained. – Lump

Answer 4

const hasPlaceholder = !!input.getAttribute("placeholder") // boolean

Von

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Hexose