入力タグの隣のラベルをプレースホルダと同じにする方法

Question

最も近いラベルタグに入力のプレースホルダを模倣する方法を理解しようとしていました。 jQueryはもちろん方法です。

<div class="group"> 
    <input placeholder="first" > 
    <label> First </label 
</div> 

<div class="group"> 
    <input placeholder="second" > 
    <label> second </label 
</div> 

EDIT：

チェックこのCodepen：

https://codepen.io/afasanistan/pen/mRmEwm?editors=1010

Answer 1

コールバック関数とjQueryのafter()メソッドを使用してください

私のコードは次のようになります。

$('.group input').after(function() { 
 
    // generate the label need to put after the element 
 
    return '<label>' + this.placeholder + '</label>'; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="group"> 
 
    <input placeholder="first"> 
 
</div> 
 

 
<div class="group"> 
 
    <input placeholder="second"> 
 
</div>

Answer 2

試してみてください。

1 - あなたの入力にIDを付けます。私はこれが機能するか、スクリプトに行動をjqueryのを使用することができるため、このブラウザ固有のCSSルールを試してみてください2 -

$(document).ready(function() { 
    var sd = $('#input1').attr('placeholder'); 
    $('label[for^=input1]') = sd ; 
}); 

Answer 3

#input1/#input2

を想定しています。

::-webkit-input-placeholder { 
 
    /* Chrome/Opera/Safari */ 
 
    text-align: right; 
 
} 
 
::-moz-placeholder { 
 
    /* Firefox 19+ */ 
 
    text-align: right; 
 
} 
 
:-ms-input-placeholder { 
 
    /* IE 10+ */ 
 
    text-align: right; 
 
}

<div class="group"> 
 
    <input placeholder="first"> 
 
    <label>First</label> 
 
</div> 
 

 
<div class="group"> 
 
    <input placeholder="second"> 
 
    <label>second</label> 
 
</div>

for more info