j-Textbox

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Configuración:

type {String} (opcional) puede ser email, phone, password, date, number, search, lower, upper o vacío. (predeterminado)
required {Boolean} (opcional) habilita "requerido" (predeterminado: false)
icon {String} (opcional) icono para etiqueta, p. home, cog, etc.
Icono icon2 {String} (opcional) en el cuadro derecho, p. home, cog, etc.
Etiqueta label {String} (opcional) (el contenido predeterminado es HTML)
autofocus {Boolean} (opcional) enfoca la entrada (predeterminado: false)
align {String} (opcional) left (predeterminado), right o center
autofill {Boolean} (opcional) habilita la función de autocompletar del navegador (predeterminado: false)
placeholder {String} (opcional) agrega un texto placeholder en la entrada
maxlength {Number} (opcional) establece una longitud máxima de caracteres
minlength {Number} (opcional) establece una longitud mínima de caracteres
validation {String} (opcional) una condición para evaluation, p. value.match(/[a-z]+/) !== null
Formato de salida format {String} (opcional), p. para fechas (predeterminado: yyyy-MM-dd)
increment {Boolean} (opcional) habilita controles para incrementar números (predeterminado: false)
keypress {Boolean} (opcional) puede desactivar los valores de enlace en tiempo real (predeterminado: true)
delay {Number} (opcional) puede aumentar/disminuir el retraso para el enlace en tiempo real (predeterminado: 300 ms)
disabled {Boolean} (opcional) desactiva este componente
error {String} (opcional) agrega un texto string debajo de la entrada
iconclick {String} (opcional) debe contener un enlace a una función
autocomplete {String} (opcional) debe contener un enlace a una función, se activa en el evento focus
spaces {Boolean} (opcional) habilita espacios, de lo contrario los elimina (predeterminado: true)
readonly {Boolean} opcional, predeterminado false
NEW innerlabel {Boolean} opcional, habilita etiqueta interior (predeterminado: true)

Interesante:

type:date utiliza el componente calendar

Úselo con <ui-component name="textbox">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>