入力内の位置スパン

Question

私はクライアントが "表示/非表示"のパスワード機能を望んでいるプロジェクトを開発中ですが、入力ボックスの中にボタンが必要です。私たちが静的な画面で作業していれば、これも簡単です。

しかし、これはメディアクエリを使用するプロジェクトであるため、アンカーを動的に配置する方法（アンカーはマスク/マスクの制御要素です）の入力を動的に配置する方法になります。

私は迷っています。私はここ（アカウントのボーダー半径などを考慮していない）理想的な目標を示す簡単なフィドル設定しました：http://jsfiddle.net/x4jPE/

ソリューションを

http://jsfiddle.net/LyfTJ/2/

多くのおかげでロブにW

Answer 1

コンテナを作成し、position CSS属性をrelativeに設定して、絶対配置された内部要素がコンテナを基準にしているようにします。 display:inline-blockも追加して、コンテナが必要な最小サイズ（=入力フィールドのサイズ）に縮小されるようにします。

次に、ボタンがフィールドの内容と重複しないように、パスワードフィールドにpadding-right:42pxを追加します。最後に、position:absolute; right:0;をアンカーに追加して、入力フィールドの右側に配置します。

フィドル：http://jsfiddle.net/LyfTJ/1/

HTML：

<div class="zpass"> 
    <input type="password" name="zpass" /> 
</div> 

JS：

$(document).ready(function(){ 
    $(".zpass").each(function(){ 
     $(this).append("<a>Show</a>"); 
     var zpass = $("input", this)[0]; 
     $("a", this)[0].href = "javascript:;"; 
     $("a", this).click(function(){ 
      if(zpass.type == "password"){ 
       zpass.type = "text"; 
       this.innerHTML = "Hide"; 
      } else { 
       zpass.type = "password"; 
       this.innerHTML = "Show"; 
      } 
     }); 
    }); 
}); 

CSS：

.zpass { 
    position: relative; 
    display: inline-block; 
} 
.zpass > input { 
    padding: 8px 42px 8px 8px; 
    width: 250px; 
    border: 1px solid #ccc; 
} 
.zpass > a { 
    position: absolute; 
    right: 0px; 
    padding: 9px 4px 8px; 
    font-size: .85em; 
    color: #a5a5a5; 
    background: #eee; 
    border: 1px solid #ccc; 
    border-left: 0; 
    text-decoration: none; 
    cursor: pointer; 
    text-align: center; 
    width: 33px; 
} 
.zpass > a:hover { 
    background-color: #ccc; 
}