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

我可以在开始时将密码设置为隐藏，但我需要知道如何使用changePass按钮＆＃34;成为＆＃34;或者使用CSS或javascript扩展到密码文本字段。我是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;
}

即使我把它从包装纸中拿出来，你的颜色也不会透过。为什么会这样？

Answer 1

您可以echo按钮和文本字段，并确保默认隐藏字段 - echo '<div id="button" style="display:hidden"></div>';。然后，使用javascript隐藏按钮并在单击按钮时显示文本字段。

button = document.getElementById('theButtonID');
field = document.getElementById('theFieldID');
button.onclick = function(){
    button.style.display = 'hidden';
    field.style.display = '';
}

动画可以通过使用javascript更改field.style.width或使用css动画来完成。

Answer 2

将您的按钮和输入字段放在同一个div中，然后使用relative和absolute的定位技巧将它们重叠。然后使用JQuery在隐藏元素时使其看起来很漂亮。

JSFiddle：https://jsfiddle.net/wpbL3kjx/9/

＆＃13;

//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");
      });
    });
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您使用jQuery，则可以使用.replaceWith

执行此操作

例如：

<强>的index.html

<button>To input</button>

<强>的script.js

$(document).ready(function(){
    $("button").click(function(){
        $(this).replaceWith('<input type="text"/>')
    });
});

结果：https://jsfiddle.net/sws5m4cc/

Answer 4

正如其他答案所暗示的那样，一些jquery可以很简单地做到这一点，但也可以通过javascript完成。我在这个jsfiddle中使用了jquery路径和可见性：

JS

$('button').on("click",function(){
    $('.hideable').toggleClass('hidden');
});

$('input').on("blur", function(){
    $('.hideable').toggleClass('hidden');
});

的CSS：

.hideable{
  position: absolute;
  opacity: 1;
  transition: visibility .35s, opacity .5s linear;
}

.hidden{
  visibility: hidden;
  opacity: 0;
}

小提琴包括javascript方法和jquery方法 docs

Answer 5

一个好的做法是将行为（功能）与页面结构（html文档）和表示（css / style）分开。

我会在css中创建一些类（show / hide）并使用这些类在DOM中进行某些更改，这样我就可以找到更容易的最终错误。

另一种方法是使用像jQuery这样的库并使用它们的函数，例如toggle或show和hide。

<input type="text" name="user" placeholder="username"/>
<input type="text" name="password" placeholder="password"/>

<input type="text" id="other" class="hideThis" name="other" placeholder="please fill this too.."/>
<button id="btn" class="showThis">submit</button>

.hideThis {
    display: none;
}

.showThis {
  display: block;
}

var button = document.getElementById('btn');
button.onclick = function(){
    button.className = "hideThis";
    document.getElementById('other').className = 'showThis';
}

jsFiddle

干杯！

Javascript / CSS：点击时将按钮更改为文本字段？

5 个答案: