2017-03-21 25 views
0

フォームは現在正常に動作していますが、テキストを入力すると入力欄に入力した内容が表示されます。フォームライズ - 入力中にテキストを入力し、テキストを繰り返して入力してください。

名前を記入するといいでしょう: ボブザビルダのプレースホルダには、「名字」の代わりに同じ「Bob The Builder」が表示されます。以下は

それに関連するコードです:

Form-rise-click here for fiddle

HTML:

<div class="wrap"> 
    <div> 
    <label for="fname">First Name</label> 
    <input id="fname" type="text" class="cool"/> 
    </div> 

    <div> 
    <label for="lname">Last Name</label> 
    <input id="lname" type="text" class="cool"/> 
    </div> 

    <div> 
    <label for="email">Email</label> 
    <input id="email" type="text" class="cool"/> 
    </div> 
</div> 

はCSS:

body { 
    font-family: 'Lato', sans-serif; 
    color: black; 
    background-color: white; 
} 
h1 { 
    font-size: 60px; 
    margin: 0px; 
    padding: 0px; 
} 
h3 { 
    margin: 0px; 
    padding: 0px; 
    color: #999; 
} 

div.wrap { 
    width: 500px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    vertical-align: middle; 
} 

div.wrap div { 
    position: relative; 
    margin: 50px 0; 
} 

label { 
    position: absolute; 
    top: 0; 
    font-size: 30px; 
    margin: 10px; 
    padding: 0 10px; 
    background-color: white; 
    -webkit-transition: top .2s ease-in-out, 
         font-size .2s ease-in-out; 
    transition: top .2s ease-in-out, 
       font-size .2s ease-in-out; 
} 

.active { 
    top: -25px; 
    font-size: 20px; 
} 

input[type=text] { 
    width: 100%; 
    padding: 20px; 
    border: 2px solid black; 
    font-size: 20px; 
    background-color: white; 
    color: black; 
} 

input[type=text]:focus { 
    outline: none; 
} 

のjQuery:

$('input').on('focusin', function() { 
    $(this).parent().find('label').addClass('active'); 
}); 

$('input').on('focusout', function() { 
    if (!this.value) { 
    $(this).parent().find('label').removeClass('active'); 
    } 
}); 

答えて

2

を私はちょうどからkeyup()jqueryののを使用していました。基本的には、のキー入力のイベントハンドラです。

$('input').keyup(function(){  
    $(this).parent().find('label').text($(this).val()) 
}); 

ご不明な点がある場合はをご確認ください。

の方が良いと思われる小さな提案があります。

入力値が空の場合、小さな前置プレースホルダを表示するための条件を指定できます。そして、属性の助けを借りてそのプレースホルダーを管理することができます。たとえば、ここではの名前を使用してプレースホルダを取得しています。

JSFiddleをご確認ください。

希望すると便利です。ありがとうございました。

1

はい、可能です。残りの入力の例として、次のjQueryコードを使用してください。

$("#fname").keyup(function() { 
    $("label[for='fname']").html($(this).val()); 
}); 

説明:あなたはあなたが現在の値にIDを入力します(たとえば、ラベルfnameの)を先頭に移動し、ラベルの値を変更する(例えば#fname)を選択しますタイピング。

ここで更新JSFiddleを確認してください:https://jsfiddle.net/NikolaosG/tyowcgut/3/

+1

私は、これは私が探していたまさにです、みんなの助けに感謝。すべての答えは良いです。私は最後の二日以来私のマシンから離れていたので、それに反応することはできませんでした。 ありがとう – Bob

1

はい、これを処理するには、keyupイベントが最適です。しかし、さらに、入力ごとに複数のイベントハンドラを使用します。ここでは、そのシナリオを処理する別の方法があります。それが単なる選択肢ではありません。

$('input').on({ 
 
    focusin: function() { 
 
    $(this).parent().find('label').addClass('active'); 
 
    }, 
 
    focusout: function() { 
 
    if (!this.value) { 
 
     $(this).parent().find('label') 
 
     .removeClass('active'); 
 
    } 
 
    }, 
 
    keyup: function() { 
 
    var newText = $(this).val(); 
 
    $(this).parent().find('label').text(newText); 
 
    } 
 
});
body { 
 
    font-family: 'Lato', sans-serif; 
 
    color: black; 
 
    background-color: white; 
 
} 
 
h1 { 
 
    font-size: 60px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
h3 { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    color: #999; 
 
} 
 

 
div.wrap { 
 
    width: 500px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    vertical-align: middle; 
 
} 
 

 
div.wrap div { 
 
    position: relative; 
 
    margin: 50px 0; 
 
} 
 

 
label { 
 
    position: absolute; 
 
    top: 0; 
 
    font-size: 30px; 
 
    margin: 10px; 
 
    padding: 0 10px; 
 
    background-color: white; 
 
    -webkit-transition: top .2s ease-in-out, 
 
         font-size .2s ease-in-out; 
 
    transition: top .2s ease-in-out, 
 
       font-size .2s ease-in-out; 
 
} 
 

 
.active { 
 
    top: -25px; 
 
    font-size: 20px; 
 
} 
 

 
input[type=text] { 
 
    width: 100%; 
 
    padding: 20px; 
 
    border: 2px solid black; 
 
    font-size: 20px; 
 
    background-color: white; 
 
    color: black; 
 
} 
 

 
input[type=text]:focus { 
 
    outline: none; 
 
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="wrap"> 
 
    <div> 
 
    <label for="fname">First Name</label> 
 
    <input id="fname" type="text" class="cool" /> 
 
    </div> 
 

 
    <div> 
 
    <label for="lname">Last Name</label> 
 
    <input id="lname" type="text" class="cool" /> 
 
    </div> 
 

 
    <div> 
 
    <label for="email">Email</label> 
 
    <input id="email" type="text" class="cool" /> 
 
    </div> 
 
</div>

関連する問題