web-dev-qa-db-fra.com

Comment déplacer le paramètre fictif vers le haut en mettant l'accent ET en tapant?

Je veux que l'espace réservé se déplace vers le haut lorsque la zone de texte est active et également pendant que l'utilisateur tape.

Je ne suis pas sûr qu'il s'agisse uniquement de HTML/CSS ou de javascript.

Mon css actuel ressemble à ceci et je n'ai pas encore de code js:

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;
}

Le travail est presque terminé, mais l’espace réservé disparaît lorsque je commence à taper. J'utilise Twitter-bootstrap, si cela facilite quelque chose!

Merci.

htmlcsshtml5twitter-bootstrapcss3
30
Bivo Kasaju

Tu pourrais le faire comme ça

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;
}

Travailler JSFiddle ici https://jsfiddle.net/273ntk5s/2/

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

Modifié le code de @ user1846747 un peu.

11
Dinu Mathai

Ce site ne déplace pas l’espace réservé, mais place un div (.floating-label) sur l’entrée, ainsi, lorsque l’entrée est activée, la division s’anime simplement pour être au-dessus de l’entrée. La partie clé ici utilise pointer-events: none; dans le div flottant, ainsi, lorsque vous cliquez dessus, l'événement le traverse dans la zone de saisie située derrière.

2
Enrico

tilisant uniquement HTML et css

.searchformfld{
    position: relative;
    margin: 5px 0px;
}
.searchformfld label{
    position: absolute;
    padding-left: 10px;
    top:15px;
}
.searchformfld input:focus + label,.searchformfld input:not(:placeholder-shown) + label{
    opacity:1;
    transform: scale(.9) translateY(-100%) translateX(-10px);
    color:#000;
}
.searchformfld input:focus{
    border:1px solid #000;
    outline-color: #000;
}
.searchformfld{
    padding: 15px;
    margin:15px 0px;
}
.searchformfld input{
    width:100%;
    padding-left: 10px;
}
.searchformfld label,.searchformfld input{
    transition: all 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity:0.5;
}
<div class="searchformfld">
            <input type="text" class="candidateName" id="candidateName" name="candidateName" placeholder=" "/>
            <label for="candidateName">Candidate name</label>
        </div>
2
Srinivasan N
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>
2
Alex