j-Textbox

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

Configuration:

type {String} (optional) can be email, phone, password, date, number, search, lower, upper or empty (default)
required {Boolean} (optional) enables "required" (default: false)
icon {String} (optional) icon for label e.g. home, cog, etc.
icon2 {String} (optional) icon in the right box e.g. home, cog, etc.
label {String} (optional) label (default is HTML content)
autofocus {Boolean} (optional) focuses the input (default: false)
align {String} (optional) left (default), right or center
autofill {Boolean} (optional) enables the browser's autofill feature (default: false)
placeholder {String} (optional) adds a placeholder text into the input
maxlength {Number} (optional) sets a maximum length of chars
minlength {Number} (optional) sets a minimum length of chars
validation {String} (optional) a condition for evaluation e.g. value.match(/[a-z]+/) !== null
format {String} (optional) output formatting e.g. for dates (default: yyyy-MM-dd)
increment {Boolean} (optional) enables controls for incrementing of numbers (default: false)
keypress {Boolean} (optional) can disable real-time binding values (default: true)
delay {Number} (optional) can increase/decrease delay for real-time binding (default: 300 ms)
disabled {Boolean} (optional) disables this component
error {String} (optional) adds a string text under the input
iconclick {String} (optional) needs to contain a link to a function
autocomplete {String} (optional) needs to contain a link to a function, is triggered on the focus event
spaces {Boolean} (optional) enables spaces otherwise it removes them (default: true)
readonly {Boolean} optional, default false
NEW innerlabel {Boolean} optional, enables inner label (default: true)

Interesting:

type:date uses the calendar component

Use it with <ui-component name="textbox">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<div style="width:400px">
	<ui-component name="textbox" path="form.name" config="required:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
	<br />
	<ui-component name="textbox" path="form.email" config="required:true;type:email;autofill:email;icon:envelope;error:E-mail must be in format email@domain.com">E-mail</ui-component>
	<br />
	<ui-component name="textbox" path="form.password" config="type:password">Password</ui-component>
	<br />
	<ui-component name="textbox" path="form.note">Note</ui-component>
	<br />
	<ui-component name="textbox" path="form.phone" config="type:phone">Phone</ui-component>
	<br />
	<ui-component name="textbox" path="form.age" config="type:number;increment:true">Age</ui-component>
	<br />
	<ui-component name="textbox" path="form.search" config="type:search">Search</ui-component>
	<hr />
	<h2>Inner label</h2>
	<ui-component name="textbox" path="form.name" config="required:true;innerlabel:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
</div>

<script>
	var form = {};
	form.email = '@';
	form.age = 30;
</script>