j-Pin

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

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.

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>