位置范围 - 而不是占位符

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