位置範圍 - 而不是佔位符

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