POPULUS.js

It's often bothering, if not difficult to set up a small demo using a text or a search input. Depending on what you want to achieve, you have to set up the submit buttons, the clear buttons, the update of the value of the input, accessibility, etc.

That's why POPULUS was born, it was made to help you setting up complete text inputs to build demos and experiments faster!

Demo

<input type="text">

<input type="text" data-populus>

API

var populus = new Populus();

populus.init({
  target: 'data-populus',
  features: {
    wrapper: true,
    placeholder: 'Another POPULUS instance',
    autocomplete: true,
    autocorrect: true,
    autocapitalize: true,
    spellcheck: true,
    required: true,
    autofocus: false,
    updateValue: true,
    a11y: {
      label: 'Search more',
      outline: ['2px', 'dotted', 'lime', '-5px']
    }
  },

  buttons: {
    search: {
      label: 'search',
      onClick: 'console.log("hey")'
    },
    cancel: {
      label: 'or not',
      onClick: 'console.log("hooo")'
    }
  }
});

target

The attribute to target

target: 'data-populus-c'

features.wrapper

If true, it will wrap the Populus input with a <div class="populus--wrapper">>div>.

features.wrapper: true

features.placeholder

The placeholder of the input

features.placeholder: 'Another POPULUS instance',

features.autocomplete

mobile

Enable/disable autocompletion

features.autocomplete: true

features.autocorrect

mobile

Enable/Disable autocorrection

features.autocorrect: true

features.autocapitalize

Safari/iOS

Enable/disable autocapitalize.

afeatures.utocapitalize: true

features.spellcheck

Mobile/Safari/iOS

Enable/disable spell-checking

features.spellcheck: true

features.required

If true, the input will be required.

features.required: true

features.autofocus

If true, the input will be auto-focused on page load.

features.autofocus: true

features.updateValue

If true, the value of the input will be updated as you type.

features.updateValue: true

features.a11y.label

Add the aria-label, name and title attributes to the input

a11y.label: 'search input'

features.a11y.outline

Add outline for accessibility

1: Outline width
2: Outline type
3: Outline color
4: Outline offset (optional)

a11y.outline: ['2px', 'solid', 'blue', '-2px']

buttons.search.label

The text/html of the search button

buttons.search.label: 'Search!',

buttons.search.click

The JS executed when clicking on the search button

buttons.search.onClick: 'this.parentNode.childNodes[0].focus()'

buttons.cancel.label

The text/html of the cancel button

buttons.cancel.label: 'cancel',

buttons.cancel.click

The JS executed when clicking on the cancel button

buttons.cancel.onClick: 'this.parentNode.childNodes[0].value=""'