让文本输入幻灯片显示输入时的新文本输入?然后向后滑动

Have text input slide over to reveal new text input on enter? Then slide back?

本文关键字：输入 文本 然后 显示 幻灯片 新文本      更新时间：2023-09-26

好的，现在我有1个表单和1个文本输入字段：

echo '<form class="changePassForm" action="" method="post" enctype="multipart/form-data">';
echo '<input class = "passwordText" type="password" placeholder="Change Password" name="passwordText">';
echo '<input class = "oldPass" type="password" placeholder="Enter Old Password" name="oldPass">';
echo '</form>';

当用户在passwordText输入上按enter键时，输入的文本将以变量形式传递给php文件：

$(".passwordText").keydown(function(event){
    if(event.keyCode == 13){
      var pass = $(this).val();
        //var pass = document.getElementById("p2");
    $.ajax({
        url: "../php/passwordchange.php", // Url to which the request is send
        type: "POST",             // Type of request to be send, called as method
        data: 'passwordText=' + pass, // data sent to php file
        success: function(data)   // A function to be called if request succeeds
        {
            console.log(data);
        }});    
     console.log("WORKS!!");   
    }
});

当这种情况发生时，我需要将.passwordText输入字段滑到上面并隐藏起来（无法与之交互），这样我就可以从第二个文本输入中获得值。我不知道如何做到这一点，因为我是javascript的初学者。

以下是我的CSS供参考：

.changePassForm input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  width: 250px;
  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block;
  text-align: center;
  font-size: 18px;
  color: white;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
}
.changePassForm input:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.changePassForm input:focus {
  background-color: white;
  width: 300px;
  color: #53e3a6;
}
.changePassForm button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  background-color: white;
  border: 0;
  padding: 10px 15px;
  color: #53e3a6;
  border-radius: 3px;
  width: 250px;
  cursor: pointer;
  font-size: 18px;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.changePassForm button:hover {
  background-color: #f5f7f9;
}

如何将第一个输入移到第二个文本输入的值？

您需要在AJAX成功的过程中做到这一点。

 $.ajax({
        url: "../php/passwordchange.php",
        type: "POST",
        data: 'passwordText=' + pass, // data sent to php file
        success: function(data){
            console.log(data);
            //HERE'S THE PLACE TO DO IT.
            $('.passwordText').slideUp(500)
        }
    });

上面的代码所做的是"告诉"passwordText在500毫秒（或半秒）的时间范围内隐藏自己。

我还假设当php执行时，它会返回一个成功的响应。如果脚本返回失败的响应，您可能还需要执行其他操作。

您可能想看看JSEND，了解如何构建JSON响应。

相关文章：