javascript - 填写所有必需的输入后按钮滑动

Question

我有一个带有经典文本框和文本区域的表单。所有输入都是必需的。 我只想在填写此字段时显示提交按钮。提交按钮必须是动画的(从右边滑动)。

谁能帮帮我？

Answer 1

let formObj = document.querySelector('#my-form');
let emailObj = document.querySelector('#email');
let passObj = document.querySelector('#password');
let submitObj = document.querySelector('#showBtn');

formObj.addEventListener('keyup', function(e){ 
  if(emailObj.value === '' || passObj.value === ''){
     document.querySelector('#showBtn').style.right="-300px";
  }else{
     document.querySelector('#showBtn').style.right="40%";
  }
});

submitObj.addEventListener('click', function(e){
  e.preventDefault();
 alert('do somthing')
});

#container{
position: relative;
width:80%;
margin: 10px auto;
}
#btn-container button{
  position: absolute;
  right: -300px;
  transition: 1s;
  padding: 10px;
  width: 100px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}

#showBtn {
  top: 30px;
  background-color: #4CAF50;
}

<div id="container">
   <form id="my-form">
     <input id="email" type="email">
     <input id="password" type="password">
     <div id="btn-container"><button id="showBtn">Submit</button> </div>
   </form>
</div>