Question

我正在开发一个项目，我的客户想要一个“显示/隐藏”密码功能 - 这很简单，但他们想要输入框内的按钮。如果我们在静态屏幕上工作，这也很简单。

但是，这是一个使用媒体查询的项目，因此问题就变成了如何动态定位锚点（锚点是我们控制元素的掩码/取消掩码）里面输入。

我很茫然。我在这里设置了一个简单的小提琴，显示了理想的目标（不考虑边界半径等）：http://jsfiddle.net/x4jPE/

解决方案

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

非常感谢Rob 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;
}

输入内的位置跨度 - 不适用于PLACEHOLDER

1 个答案: