Campo PIN

[d.termini]

InDe Cloud, ho la necessità di creare un campo per l'immissione di un PIN numerico nascosto.

Attualmente sto usando un popup e ho notato che non sembra supportare l'attributo maxlength, oltre al fatto che un campo può essere o numerico o password, non entrambi.
Sicuramente sostituirò il popup con una videata (sempre caricata nel popup) in modo da avere più flessibilità, anche se non l'ho mai fatto prima per la richiesta di valori.

Qualcuno ha già avuto questa esigenza e riuscirebbe a darmi una dritta?

[majinbu]

Premetto che sono nuovo del mondo InDe,
cmq ho replicato il tuo problema in un test e ho risolto in questo modo.
elemento IonInput, proprietà:

Type = password
Maxlengt = 3

nell'evento onInput ci metti un codice simile a questo:

$input.onInput = function (event)
{
var lun = this.value.length;
var keycode = this.value.charCodeAt(lun - 1);
if (keycode < 48 || keycode > 57)
this.value = this.value.substr(1, lun - 1);

};

il quale fa in modo che se scrivi un carattere che non è un numero venga per così dire invalidato.

A me funzia, magari c'è qualche sistema + elegante ripeto scritto così di botto conoscendo poco l'ambiente.

[sarcaz]

Ciao noi abbiamo implementato un pin lungo 8 caratteri con un ion-input all'interno di un container con il seguente css, applicando al container la classe "pincontainer" e all'input la classe "inputpin" :

/****** PIN CONTAINER *************************/

.pincontainer , .inputpin{

border: none;
font-size: 42px;
width: 260px;
margin: 0 auto;
letter-spacing: 8px;
}

.pincontainer {
position:relative;
}

.pincontainer::before
{ font-family: small-caption;
position: absolute;
left: 0;
top: 10px;
content: "";
pointer-events: none;
opacity: 1;
font-size: 1em;
line-height:80px;
text-align:left;
padding:0;
}

.pincontainer.val1::before{
content: "●";
}
.pincontainer.val2::before{
content: "●●";
}
.pincontainer.val3::before{
content: "●●●";
}
.pincontainer.val4::before{
content: "●●●●";
}
.pincontainer.val5::before{
content: "●●●●●";
}
.pincontainer.val6::before{
content: "●●●●●●";
}
.pincontainer.val7::before{
content: "●●●●●●●";
}
.pincontainer.val8::before{
content: "●●●●●●●●";
}



.pincontainer::after
{ font-family: small-caption;
position: absolute;
left: 0;
top: 10px;
content: "○○○○○○○○";
pointer-events: none;
opacity: 0.6;
font-size: 1em;
line-height:80px;
text-align:left;
padding:0;
}
.inputpin
{ font-family: small-caption;
border:none;
font-size: 1em;
width:100%;
margin:0 auto;
line-height:80px;
text-align:left;
padding:0;
color:#fff;

outline: none;

}
.inputpin:focus{
outline:none;
transform: scale(0);
}

[d.termini]

Grazie per i consigli, ne terrò conto