# j-Textbox

> j-Textbox: NUEVA etiqueta interna {Booleana} opcional, habilita la etiqueta interna (valor predeterminado: verdadero)

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 25a0f42a3c1381aef7987344d4aeebbe3c629df13f86234477d0fdf515b3ed7d
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__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.

```html 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>
```