2014-10-12 7 views
9

Polymer utilizza tag non standard come la carta-input ecc esempio un'immagine un modulo di accesso creata con Polymer Per:Uso dei componenti Web polimeri e richiamare salvataggio password prompt dei

<paper-input id="email" floatingLabel inputValue="{{emailValue}}" label="Email"></paper-input> 
<paper-input id="password" type="password" inputValue="{{passwordValue}}" label="Password"></paper-input> 
<paper-button on-tap={{loginFunction}} label="Login"></paper-button> 

come utilizzare la password del browser memorizzare e ricordare le capacità password inserite in un modulo Polimero?

+0

Tutto è composto da elementi html, condito con css e js. Ma tutte le funzionalità di base sono ancora lì, e non ci dovrebbe essere alcuna differenza se le si utilizza in una forma proprio come si farebbe con gli elementi di input regolari. (Non è garantito che tutti gli attributi standard siano sempre pubblicati e che un elemento personalizzato non li manipoli esplicitamente internamente, i selettori CSS non attraversino il limite ombra e alcuni eventi) – Winchestro

+0

Questo potrebbe non essere risolvibile - ogni browser ha il proprio approccio per identificare i campi username e password. – ChargerIIC

+0

Suppongo che tu usi AJAX per inviare quei dati, giusto? I browser memorizzano solo i dati del modulo se si utilizza il normale processo di invio del modulo. –

risposta

4

Usa paper-input-decorator, che avvolge semplicemente ingressi nativi, ad esempio:

<paper-input-decorator label="Username" floatingLabel> 
    <input is="core-input" name="username"> 
    </paper-input-decorator> 

    <paper-input-decorator label="Password" floatingLabel> 
    <input is="core-input" name="password" type="password"> 
    </paper-input-decorator> 

Ecco un JSBin di quanto sopra nel caso in cui è utile: http://jsbin.com/wumepu/2/edit?html,output

+1

Non sta ancora richiamando la password salvata nel browser né Lastpass come nei moduli classici. – opengrid

0

Si è tentato di sostituire/completare l'input carta elemento con input di base su submit. Qualcosa di simile a jQuery:

$('form').submit(function() { 
    $('<input type="text" name="fake-email-field">') 
     .appendTo(this).val($('#email').val()); 
    $('<input type="password" name="fake-password-field">') 
     .appendTo(this).val($('#password').val()); 
}); 
+1

Non è questo pensare al contrario. So che le nuove soluzioni portano nuovi problemi, ma una struttura di componenti nel 2014 promossa da Google non dovrebbe promuovere l'hacking delle funzionalità di base. – opengrid

0

si potrebbe essere interessato dall'attributo autocomplete: Nel tuo caso:

<paper-input 
    id="email" floatingLabel inputValue="{{emailValue}}" 
    label="Email" autocomplete="email"> 
</paper-input> 
<paper-input id="password" type="password" inputValue="{{passwordValue}}" 
    label="Password" autocomplete="current-password"> 
</paper-input> 

Invece di current-password, è possibile specificare anche new-password se si tratta di una nuova creazione di un account.

Problemi correlati