Empty Within

Empty Within lets target elements based on whether they are empty editable text fields or contain empty text editable fields.

Empty Within applies an empty-within attribute to empty <textarea> and <input> text elements, or elements containing them.

.form-field label {
  /* style a label to appear above an input */
}

.form-field[empty-within] label {
  /* style a label differently when .form-field contains an empty input */
}

Usage

Add Empty Within to your build tool:

npm install empty-within

Activate Empty Within on the document or some other element:

import emptyWithin from 'empty-within';

emptyWithin(document);

You can also limit the scope of the DOM tree affected by Empty Within.

emptyWithin(document.querySelector('.my-only-form'));

Options

attr, className

Empty Within accepts a secondary paramater to configure the attribute or class name added to elements matching empty editable fields or containing empty editable fields.

emptyWithin(document, {
  attr: false,
  className: '.empty-within'
})

Falsey values on either attr or className will disable setting the attribute or class name on elements matching empty editable fields or containing empty editable fields.

watchScope, watchValue

The secondary paramater may also be used to determine how aggressive Empty Within watches the DOM tree. Setting watchScope to false will disable MutationObserver from watching for new editable fields added to the document. Setting watchValue to false will disable Object.defineProperty from capturing changes to editable fields by their value property.