web-dev-qa-db-ja.com

入力中にプレースホルダーをトップに移動する方法

テキストボックスがフォーカスされているとき、およびユーザーが入力しているときにプレースホルダーを最上部に移動させたい。

これが単なるhtml/cssなのか、それともjavascriptなのかわかりません。

私の現在のcssは次のようになります。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;
}

ほとんど動作しますが、入力を開始するとプレースホルダーが消えます。 Twitterブートストラップを使用していますが、それによって何かが簡単になります！

ありがとう。

htmlcsshtml5twitter-bootstrapcss3
30
Bivo Kasaju

このようにすることができます

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

ここでJSFiddleを操作 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>

@ user1846747のコードを少し変更しました。

11
Dinu Mathai

そのサイトはプレースホルダーを移動するのではなく、入力の上にdiv（.floating-label）を配置するため、入力がフォーカスされると、divは入力の上にアニメーションを移動します。ここで重要なのは、フローティングdivでpointer-events: none;を使用することです。そのため、クリックすると、イベントはイベントを通過してその背後の入力ボックスに移動します。

2
Enrico

HTMLと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