Polymer Papier-Eingabemaske

Ich verwende Polymer (v1.4.0) für ein Projekt und ich würde gerne wissen, ob es eine Möglichkeit gibt, eine Eingabemaske für die Papiereingabe hinzuzufügen?Polymer Papier-Eingabemaske

Ich habe versucht, die jquery.inputmask zu verwenden, die es direkt in das InputElement des Papiereingangs hinzufügt, aber dann die Bindung und Änderung Ereignis funktioniert nicht mehr.

Wenn das nicht möglich ist, kennen Sie eine andere Texteingabe-Webkomponente mit Maskenunterstützung?

Danke! André

Quelle

2016-05-29 André Schuster

Sie die Gold-xxx-Eingabeelemente als Vorlage verwenden können, wie Sie Ihr individuelles maskiertes Eingabeelement zu bauen https://elements.polymer-project.org/elements/gold-cc-input

Quelle

2016-05-29 15:10:47

Ja, ich war nun jene Komponenten zu überprüfen. Weißt du, ob es bereits eine Webkomponente mit Maskenunterstützung gibt? Ich konnte auch keine in https://customelements.io/ finden. Ansonsten werde ich es tun, ich will das Rad einfach nicht neu erfinden. –

Nein, habe noch keinen mit generischer Maskenunterstützung gesehen. –

Tatsächlich unterstützt 'Papiereingabe' die Maskierung (siehe meine Antwort). – tony19

Ja, könnte man <paper-input> ‚s allowedPattern mit preventInvalidInput verwenden. Zum Beispiel dieser Masken aus nicht-numerischen Eingabe:

<head> 
 
    <base href="https://polygit.org/polymer+1.9.3/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="paper-input/paper-input.html"> 
 
</head> 
 
<body> 
 
    <paper-input label="enter an integer" 
 
       prevent-invalid-input 
 
       allowed-pattern="[\d]+"></paper-input> 
 
</body>

^codepen

Quelle

2016-05-29 16:54:12 tony19

Diese Antwort bietet nicht die gleiche Funktionalität, die jquery.inputmask bietet. Während Sie steuern können, was der Benutzer eingibt, können Sie dem Text nicht automatisch Zeichen hinzufügen, z. B. eine Telefonnummer eingeben und die Bindestriche und Leerzeichen für Sie einfügen. – pedromanoel

Hier ist, was ich mit in Polymer 2 endete und Papier-Eingang aus der Box, keine benutzerdefinierte Codierung mit einer Telefonnummer als Beispiel. Eine etwas enge Annäherung der maskierten Eingabe ohne das superschöne Addieren der Bindestriche (-) automatisch.

Papier-Eingabemaske ist etwas, das jedoch benötigt wird.

<head> 
 
    <base href="https://polygit.org/polymer+1.9.3/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="paper-input/paper-input.html"> 
 
</head> 
 
<body> 
 

 

 

 
    <paper-input 
 

 
    auto-validate 
 
    allowed-pattern="[0-9-]" 
 
    pattern="\d{3}[\-]\d{3}[\-]\d{4}" 
 
    prevent-invalid-input 
 
    label="Mobile Phone" 
 
    placeholder="___-___-___" 
 

 
    id="phoneNumber" 
 
    type="tel" 
 
    disabled$=[[disabled]] 
 
    > 
 
    </paper-input> 
 

 

 

 

 
</body>

Quelle

2017-08-10 22:07:31

Antwort

Verwandte Themen