Come spostare il segnaposto in primo piano sullo stato attivo E durante la digitazione?

Desidero spostare il segnaposto in alto quando la casella di testo è a fuoco e anche mentre l'utente sta digitando.Come spostare il segnaposto in primo piano sullo stato attivo E durante la digitazione?

Non sono sicuro se questo è solo html/css o qualsiasi javascript.

mio css attuale assomiglia a questo, e non ho nessun codice js ancora:

input:focus::-webkit-input-placeholder { 
    font-size: .75em; 
    position: relative; 
    top: -15px; 
    transition: 0.2s ease-out; 
} 

input::-webkit-input-placeholder { 
    transition: 0.2s ease-in; 
} 

input[type="text"]:focus, input[type="password"]:focus { 
    height: 50px; 
    padding-bottom: 0px; 
    transition: 0.2s ease-in; 
} 

input[type="text"], input[type="password"] { 
    height: 50px; 
    transition: 0.2s ease-in; 
}

Lo fa quasi il lavoro (non è così perfetto come il link), ma il segnaposto scompare quando si digita . Sto usando twitter-bootstrap, se questo rende tutto più semplice!

Grazie.

fonte

2016-03-11 Bivo Kasaju

Se ispezionate quella pagina, vedrete che non è un segnaposto che stanno manipolando è un DIV che galleggia sopra l'INPUT. Dovresti essere in grado di replicare ciò che accade semplicemente guardando il codice su quel sito. –

Impossibile vedere alcun codice segnaposto ed ero così fissato che non sapevo che stavano usando un altro div. Quindi non c'è modo di far rimanere il segnaposto durante la digitazione? –

Google Material Design Lite utilizza un comportamento simile. [Qui] (http://codepen.io/joshadamous/pen/yyyqJZ) è un esempio di come implementare tale funzionalità con HTML/CSS/jQuery. Penso che in qualche modo avresti bisogno di JS in generale per far funzionare tutto bene. –

Si potrebbe fare così

HTML:

<div> 
    <input type="text" class="inputText" /> 
    <span class="floating-label">Your email address</span> 
</div>

CSS:

input:focus ~ .floating-label, 
input:not(:focus):valid ~ .floating-label{ 
    top: 8px; 
    bottom: 10px; 
    left: 20px; 
    font-size: 11px; 
    opacity: 1; 
} 

.inputText { 
    font-size: 14px; 
    width: 200px; 
    height: 35px; 
} 

.floating-label { 
    position: absolute; 
    pointer-events: none; 
    left: 20px; 
    top: 18px; 
    transition: 0.2s ease all; 
}

lavoro JSFiddle qui https://jsfiddle.net/273ntk5s/2/

fonte

2016-03-11 14:29:22

Per qualche motivo la mia etichetta mobile viene visualizzata sotto la casella di testo. Forse bootstrap sta rovinando il mio codice. –

Puoi cambiare il 'top: 18px' in' .floating-label' in base alla tua configurazione dom. In modo che l'etichetta fluttuante si trovi all'interno dell'input. –

Ho trovato un modo per aggirare, dato la posizione assoluta all'etichetta mobile e uno z-indice di> 1 perché si nascondeva dietro la casella di testo! Funziona, grazie @DivakarDaas –

Questo sito non sta spostando il segnaposto, ma posizionando un div (.floating-label) sull'input, così quando l'input è focalizzato il div si anima appena per essere sopra l'input. La parte chiave qui è l'utilizzo di pointer-events: none; nel div floating, quindi quando si fa clic su di esso l'evento lo passa attraverso la casella di input dietro di esso.

fonte

2016-03-11 14:12:00 Enrico

span{ 
 
    display:block; 
 
    } 
 
input:focus::-webkit-input-placeholder { color:transparent; } 
 
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ 
 
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ 
 
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script> 
 
$(document).ready(function() { 
 
    $('input').focus(function(){ 
 
    placeholder = $(this).attr('placeholder'); 
 
    if(placeholder != undefined){ 
 
     $(this).parent().prepend('<span class="input-placeholder">'+placeholder+'</span>'); 
 
    } 
 
    }); 
 
    $('input').blur(function(){ 
 
    $(this).parent().find('.input-placeholder').remove(); 
 
    }); 
 
}); 
 
</script> 
 
<div> 
 
    <input type="text" class="inputText" placeholder="Email adress" required/> 
 
</div>

fonte

2016-10-04 18:52:09 Alex

.user-input-wrp { 
 
\t position: relative; 
 
\t width: 50%; 
 
} 
 
.user-input-wrp .inputText{ 
 
\t width: 100%; 
 
\t outline: none; 
 
\t border:none; 
 
\t border-bottom: 1px solid #777; 
 
} 
 
.user-input-wrp .inputText:invalid { 
 
\t box-shadow: none !important; 
 
} 
 
.user-input-wrp .inputText:focus{ 
 
\t border-color: blue; 
 
\t border-width: medium medium 2px; 
 
} 
 
.user-input-wrp .floating-label { 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
\t top: 18px; 
 
\t left: 10px; 
 
\t transition: 0.2s ease all; 
 
} 
 
.user-input-wrp input:focus ~ .floating-label, 
 
.user-input-wrp input:not(:focus):valid ~ .floating-label{ 
 
\t top: 0px; 
 
\t left: 10px; 
 
\t font-size: 13px; 
 
\t opacity: 1; 
 
}

<h1>The floating label</h1> 
 
<div class="user-input-wrp"> 
 
    <br/> 
 
    <input type="text" class="inputText" required/> 
 
    <span class="floating-label">Your email address</span> 
 
</div>

modificato il codice da @ user1846747 un po '.

fonte

2018-03-04 07:52:38

Come spostare il segnaposto in primo piano sullo stato attivo E durante la digitazione?

risposta

Problemi correlati