Parts UI - Scripts / Input Events

CSS Classes such as .js-{class} are applied to pure <input>, <textarea>, <select> elements

.js-input-focus

.parts-input
--focus
--value

Adds a --focus modifier to the parent .parts-input block when focusing, and --value when typing if the field is not empty

.parts-input.parts-input--focus.parts-input--value

<div class="parts-input">
  <input type="text" class="js-input-focus"/>
</div>

Copied

The correct displaying of styles depends on these modifiers for some types of fields

Placeholder

More on form elements

.js-input-number

Prevent entering any characters, except numbers.

<div class="parts-input">
  <input type="text" class="js-input-number"/>
</div>

Copied

.js-input-phone

Only numbers and + symbol allowed

<div class="parts-input">
  <input type="tel" class="js-input-phone"/>
</div>

Copied

.js-textarea-resize

Height change of textarea depending on the amount of text entered

<div class="parts-input">
  <textarea class="js-textarea-resize"></textarea>
</div>

Copied

.js-input-limit

.parts-input
     input
     __counter
     __total

Indication of a limited number of characters

20 / 20

Character restriction is set by standard attribute maxlength, and the values fall into __counter and __total field elements

<div class="parts-input">
  <input type="text" class="js-input-limit" maxlength="20"/>
  <div class="parts-input__note">
    <span class="parts-input__counter"></span>
    /
    <span class="parts-input__total"></span>
  </div>
</div>

Copied

The project is being tested and under development

If you find a mistake or have ideas for the development of the project - send a message