我有一个按钮,我需要在单击时将其更改为文本字段(理想情况下使用动画将其展开)。现在我的按钮和文本字段在页面上彼此相邻:
echo '<form id= "changePassForm" action="" method="post" enctype="multipart/form-data">';
echo '<div class="changePass">Change Password</div>';
echo '<div class="changePassBtn" method="post"></div>';
echo '<input type="password" placeholder="Password" name="password">';
echo '</form>';
我可以将密码设置为在开始时隐藏,但我需要知道如何使用 CSS 或 javascript 使 changePass 按钮“变成”或扩展到密码文本字段。 我是 javascript 的新手,不确定如何在单击按钮时完成此操作。
如何在单击时将按钮更改为文本字段?之后我需要能够改回按钮
有了这个:
echo '<form id="changePassForm" action="" method="post" enctype="multipart/form-data">
<div class="changePass">
<div class="changePassBtn">Change Password</div>
<input type="password" placeholder="Password" name="password">
</div>';
和
.wrapper {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
margin-top: 0px;
overflow: scroll;
z-index: -1;
text-align: center;
}
.changePass {
position: relative;
width: 200px;
height: 1px;
}
.changePass input {
position: absolute;
padding: 5px;
display: none;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.changePass, .changePassBtn {
background: #2d89ef;
border-bottom: 2px solid #2b5797;
color: white;
padding: 4px;
display: inline;
border-radius: 2px;
position: absolute;
overflow: hidden;
white-space: nowrap;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 120px;
}
.changePass, .changePassBtn:hover {
background: #2b5797;
border-top: 2px solid #2d89ef;
border-bottom: 0;
}
即使我把它完全从 wrapper 里拿出来,你的颜色也看不出来。为什么会这样?
最佳答案
将您的按钮和输入字段放在同一个 div 中,然后使用 relative
和 absolute
的定位技巧将它们重叠。然后使用 JQuery 使其在隐藏元素时看起来很漂亮。
JSFiddle:https://jsfiddle.net/wpbL3kjx/9/
//Shows Input Box When Focussed
$(".changePassBtn").click(function() {
var neww = $(".changePass input").css("width");
$(this).animate({
width: neww
}, 300, function() {
$(".changePass input").fadeIn(300, function() {
$(".changePassBtn").hide();
}).focus();
});
});
//Shows Button When Unfocussed
$(".changePass input").blur(function() {
$(".changePassBtn").css("width", "auto");
var neww = $(".changePassBtn").css("width");
$(this).animate({
width: neww
}, 300, function() {
$(".changePassBtn").show(0, function() {
$(".changePass input").fadeOut(500, function() {
$(".changePass input").css("width", "auto");
});
});
});
});
.changePass {
position: relative;
}
.changePass input {
position: absolute;
padding: 5px;
display: none;
}
.changePass .changePassBtn {
background: #2d89ef;
border-bottom: 2px solid #2b5797;
color: white;
padding: 4px;
display: inline;
border-radius: 2px;
position: absolute;
overflow: hidden;
white-space: nowrap;
}
.changePass .changePassBtn:hover {
background: #2b5797;
border-top: 2px solid #2d89ef;
border-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="changePassForm" action="" method="post" enctype="multipart/form-data">
<div class="changePass">
<div class="changePassBtn">Change Password</div>
<input type="password" placeholder="Password" name="password">
</div>
</form>
关于JavaScript/CSS : Change button to a text field on click?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37284258/