# j-Pin

> Ein einfacher PIN-Maker.

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

Ein einfacher PIN-Maker.


__Konfiguration__:

- `count {Number}` eine Anzahl von PIN-Eingaben (Standard: `6`)
- `required {Boolean}` aktiviert „erforderlich“ (Standard: `false`)
- `disabled {Boolean}` kann dieses Steuerelement deaktivieren
- `hide` {Boolean} deaktiviert die Anzeige von Zahlen (Standard: `false`)
- `mask {Boolean}` deaktiviert die Maske (Standard: `true`)
- __NEW__ `exec {String}` ein Pfad zu `function(pin)`
- __NEU__ `allowpaste {Boolean}` ermöglicht das Einfügen von Pins (Standard: `true`)

__Gut zu wissen__:

- Eingabe ohne Wert erzeugt ein Leerzeichen
- Es wird `String` erwartet

__Methoden__:

- `component.focus()` fokussiert die erste Eingabe

Verwenden Sie es mit `<ui-component name="pin">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` (standardmäßig das CDN Componentator) herunter. Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html example.html
<div style="padding:50px">
	<div style="width:200px">
		<div style="margin-bottom:5px">PIN 1</div>
		<ui-component name="pin" path="pinA" config="count:4"></ui-component>
	</div>
	<br />
	<div style="width:250px">
		<div style="margin-bottom:5px">PIN 2 (hide:true)</div>
		<ui-component name="pin" path="pinB" config="count:5;hide:true"></ui-component>
	</div>
	<br />
	<div style="width:300px">
		<div style="margin-bottom:5px">PIN 3 (visible)</div>
		<ui-component name="pin" path="pinC" config="count:6;mask:false"></ui-component>
	</div>
</div>
```