JavaScript/CSS : Change button to a text field on click?

Question

我有一个按钮，我需要在单击时将其更改为文本字段(理想情况下使用动画将其展开)。现在我的按钮和文本字段在页面上彼此相邻:

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 里拿出来，你的颜色也看不出来。为什么会这样？

Answer 1

将您的按钮和输入字段放在同一个 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>