# SafeInput
<style>
    img {
        max-width: 100%;
    }
    pre {
        background-color: #F5F5F5;
        padding: .5rem;
    }
</style>

## Definición

Archivo: `induxsoft.controls.js`

Produce un campo de entrada similar al `input` de Html que permite al usuario asegurar el valor introducido en el control.

<img src="/es/api/web-components/img/safeinput-demo-01.jpg">

## Ejemplos

Maquetación HTML básica
```html
<safe-input type="text" input-name="input" id="input"></safe-input>
```

**Ejemplos de uso con JavaScript**

Establecer evento `change` al componente.
```js
const input = document.getElementById("input");

input.onChanging = (old,value) => {
    alert("Se ha establecido un nuevo valor: " + old + " > " + value);
}
```

Revertir último cambio.
```js
const input = document.getElementById("input");
input._cancelEdit();
```


<!--
## Comentarios
...
-->

## Atributos

#### type (opcional)
Establece el tipo del input: [text,email,number,textarea,date,time,datetime,select].

Tipo: `string`, valor predeterminado: `text`
```html
<safe-input type="text">
```

#### data-select (opcional)
Una cadena que representa un objeto JSON de pares clave-valor que establecen las opciones del componente cuando es de tipo `select`.

Tipo: `array`, valor predeterminado: `{}`
```html
<safe-input type="select" data-select='{"1":"Opción 1", "2":"Opción 2", "3":"Opción 3"}'>
```

#### input-name (requerido)
Nombre del componente, este nombre sera tomado por el navegador para la carga útil.

Tipo: `string`, valor predeterminado: `""`
```html
<safe-input input-name="input">
```

#### id (opcional)
Identificador del componente, este valor puede ser usado para acceder facilmente al componente mediante javascript.

Tipo: `string`, Predeterminado: `""`
```html
<safe-input id="input">
```

#### placeholder (opcional)
Establece el texto (placeholder) a mostrar en el campo de entrada.

Tipo: `string`, valor predeterminado: `""`
```html
<safe-input placeholder="Escribe aquí...">
```

#### hidden-input (opcional)
Define si se crea un elemento input oculto fuera el web component para ser tomado por formularios o selectores.

Tipo: `bool`, valor predeterminado: `false`
```html
<safe-input hidden-input="true">
```

## Propiedades

- `onChanging`: (function) Permite establecer una función (callback) que sera invocada cada que se establezca un nuevo valor en el componente.

<!--
## Métodos
-->
<!--
## Eventos
-->