BW Inputs

BW Inputs handles customisation of all your inputs, contenteditable elements and textareas for easy styling and common functions.

Every input will be wrapped in elements and all checkboxes and radio buttons will automatically be restructured to making them fully customisable.

Most other functionality is very simple and requires custom attributes to be added to your inputs.

Example usage

 

Custom classes

Below are classes you can add to inputs for added features

Variable/Key
Type
Default
Description
nocustom
string
-
add this class to disable the plugin for the input
autogrow
string
-
add this class to TEXTAREAS to enable them to grow vertically as new lines are inputted
integer
string
-
add this class to INPUT elements to force them as an integer. The same behaviour is applied if the input attribute TYPE is NUMBER
float
string
-
add this class to INPUT elements to force them as an float
price
string
-
add this class if the INPUT should be a price (float to 2 decimal places)

Custom attributes (inputs)

Below are custom attributes you can add to your inputs.

Variable/Key
Type
Default
Description
data-wrapper_class
string
""
bw-input is always added plus any specified class names
data-init_text
string
""
placeholder text to show while the input is empty.
data-placeholder_class
string
""
class name(s) to add to the placeholder element
data-maxchars
string
""
maximum character count allowed. Also adds an element with the class char-count to your input wrapper. You can then hide, or style this representation of cahracters remaining
data-maxval
string
""
this attribute is useful for number inputs to set a maximum value (e.g. limit order quantity)
data-minval
string
""
this attribute is useful for number inputs to set a minimum value
data-dec_count
string
""
number of decimal places to allow in your float (if class name float added)

Custom attributes (radio/checkbox)

Below are custom attributes you can add to your radio or checkboxes.

Variable/Key
Type
Default
Description
data-wrapper_class
string
default
(checkbox/radio)-input is always added plus your specified classes
data-label_class
string
""
bw-label is always added plus any specified class names
data-inner_class
string
""
icon-inner is always added plus any specified class names. This is inside a span with the class icon-outer
data-custom_html
string
""
you can add any custom HTML you want to be added to the checkbox.
data-on_class
string
on
change this class if you want to have a different class for a checkbox/radio being checked