j-Textbox

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Configurazione:

type {String} (opzionale) può essere email, phone, password, date, number, search, lower, upper o vuoto (default)
required {Boolean} (opzionale) consente "necessario" (default: false)
icon {String} (opzionale) iconico per etichette, ad esempio home, cog, ecc.
L'icona icon2 {String} (opzionale) nella scatola destra, ad esempio home, cog, ecc.
label {String} (opzionale) etichetta (default è il contenuto HTML)
autofocus {Boolean} (opzionale) focalizza l'ingresso (default: false)
align {String} (opzionale) left (default), right o center
autofill {Boolean} (opzionale) consente la funzione di autofill del browser (default: false)
placeholder {String} (opzionale) aggiunge un testo placeholder all'ingresso
maxlength {Number} (opzionale) impone una lunghezza massima di carri
minlength {Number} (opzionale) impone una lunghezza minima di cartucce
validation {String} (opzionale) una condizione per evaluation ecc. value.match(/[a-z]+/) !== null
format {String} (opzionale) formato di uscita per esempio per le date (default: yyyy-MM-dd)
increment {Boolean} (opzionale) consente controlli per l'incremento dei numeri (default: false)
keypress {Boolean} (opzionale) può disattivare i valori vincolanti in tempo reale (default: true)
delay {Number} (opzionale) può aumentare / diminuire il ritardo per la connessione in tempo reale (default: 300 ms)
disabled {Boolean} (opzionale) disabilita questo componente
error {String} (opzionale) aggiunge un testo string sotto l'ingresso
iconclick {String} (opzionale) deve contenere un collegamento a una funzione
autocomplete {String} (opzionale) deve contenere un collegamento a una funzione, è attivato sul evento focus
spaces {Boolean} (opzionale) consente spazi altrimenti li rimuove (default: true)
readonly {Boolean} opzionale, standard false
NEW innerlabel {Boolean} opzionale, permette l'etichetta interna (default: true)

Interessante è:

type:date utilizza il componente calendar

Utilizzare con <ui-component name="textbox">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

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>