2015-08-24 14 views
11

Sto cercando di sostituire i caratteri del punto elenco in un campo password con emoji.Emojis sul testo di input

uscita Unicode desiderata http://apps.timwhitlock.info/emoji/tables/unicode

Tutte le idee su dove iniziare a cercare di raggiungere questo obiettivo sarebbe utile enter image description here

+3

possibile duplicato di [modifica password char in HTML] (http://stackoverflow.com/questions/4257053/change-password-char-in-html) –

+0

è possibile utilizzare un campo di testo di mascheramento che si nutre di una libreria come angularjs o ember (per ottenere il testo mentre viene digitato) e per ogni carattere invece di emettere il testo, si genera un'immagine. dovresti davvero perfezionare il processo ma questo è un passo nella giusta direzione. –

+0

Grazie a @Mari, anche se il post continua a non rispondere alla domanda con la risposta "Questo non può essere fatto" – Rob

risposta

1

Da quello che sono riuscito a trovare, questa non è una buona idea. Poiché il browser esegue il rendering in modo nativo, se si crea una soluzione JavaScript probabilmente compromettere la sicurezza, interrompere il completamento automatico, ecc.

Trovato da qui: change password char in HTML.

Anche se questo è diverso da quello che si vuole fare, ecco qualcuno che sta facendo dello stile CSS di base sul campo di inserimento della password. Spiacente, non è fantastico come quello che stai cercando di fare: Styling Password Fields in CSS.

5

Ho scoperto come modificare l'icona del punto elenco nei browser Webkit.

password-input-typing

In sostanza, si utilizza un carattere personalizzato (demo).

  • Vai a Fontello o sito equivalente.
  • Scegli o carica un'icona.
  • Selezionare la scheda "Personalizza codici".
  • Modificare la destinazione del glifo in U + "2022" per sostituire il simbolo del punto elenco.
  • Scarica webfont.
  • Includere i file di font sul tuo sito, e sono i seguenti css (nota, il 0000 cambierà a seconda della destinazione glifo glifo &)

    /* Use the css below to change the password input symbol */ 
    @font-face { 
        font-family: 'fontello'; 
        src: url('./font/fontello.eot?0000'); 
        src: url('./font/fontello.eot?0000#iefix') format('embedded-opentype'), 
        url('./font/fontello.woff?0000') format('woff'), 
        url('./font/fontello.ttf?0000') format('truetype'), 
        url('./font/fontello.svg?0000#fontello') format('svg'); 
        font-weight: normal; 
        font-style: normal; 
    } 
    
    input[type="password"] { 
        font-family: "fontello"; 
        font-style: normal; 
        font-weight: normal; 
        speak: none; 
    
        /* For safety - reset parent styles, that can break glyph codes*/ 
        font-variant: normal; 
        text-transform: none; 
    
        /* Font smoothing. That was taken from TWBS */ 
        -webkit-font-smoothing: antialiased; 
        -moz-osx-font-smoothing: grayscale; 
        /* Uncomment for 3D effect */ 
        /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 
    
        /* add spacing to better separate each image */ 
        letter-spacing: 2px; 
    } 
    

Il full instructions with screenshots are here.

+0

Se la sicurezza non è una preoccupazione importante (che non penso sia in questo caso specifico) potresti creare un font composto interamente da emoticon e utilizzare invece un campo di testo, che dovrebbe funzionare come browser. – Mikk3lRo