j-Textbox

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Configuração:

type {String} (Opcional) pode ser email, phone, password, date, number, search, lower, upper ou em vácuo (default)
required {Boolean} (opcional) permite o "requisito" (default: false)
Icon icon {String} (opcional) para o rótulo, por exemplo, home, cog, etc.
icon2 {String} (opcional) ícone na caixa direita, por exemplo, home, cog, etc.
label {String} (opcional) etiqueta (default é conteúdo HTML)
autofocus {Boolean} (opcional) concentra a entrada (default: false)
align {String} (opcional) left (default), right ou center
autofill {Boolean} (opcional) permite a função de autofilação do navegador (default: false)
placeholder {String} (opcional) adiciona um texto placeholder à entrada
maxlength {Number} (opcional) estabelece uma duração máxima de carros
minlength {Number} (opcional) estabelece um comprimento mínimo de carros
validation {String} (opcional) uma condição para evaluation etc. value.match(/[a-z]+/) !== null
format {String} (opcional) formato de saída, por exemplo, para datas (default: yyyy-MM-dd)
increment {Boolean} (opcional) permite controlos para aumentar os números (default: false)
keypress {Boolean} (opcional) pode desativar valores vinculativos em tempo real (default: true)
delay {Number} (opcional) pode aumentar / diminuir o atraso para a ligação em tempo real (default: 300 ms)
disabled {Boolean} (opcional) desabilita este componente
error {String} (opcional) adiciona um texto string abaixo da entrada
iconclick {String} (opcional) precisa de um link para uma função
autocomplete {String} (opcional) precisa de conter um link para uma função, é desencadeado no evento focus
spaces {Boolean} (opcional) permite espaços, caso contrário, ele os remove (default: true)
readonly {Boolean} opcional, padrão false
NEW innerlabel {Boolean} opcional, permite a etiqueta interna (default: true)

Interessante em:

type:date utiliza o componente calendar

Use-o com <ui-component name="textbox">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>