进度栏（JavaScript）

Question

我希望进度条正常工作。在每个输入（名字，姓氏，全名，输入密码，重新输入密码）上，进度应从0％变为20％，40％，60％，80％，100％。如果输入字段为空白，则对于每次输入，进度条都不会增加20％。您可以在网页顶部看到进度栏。

searching(ev) 
  {
    var val = ev.target.value;
    this.share.FetchStations(val).subscribe(data => 
      {
      // this.stationlist=data.trains.codeandname;
      console.log(data.trains.length);
      for (var j=0; j < data.trains.length; j++) 
      {
        this.stationlist=data.trains[j].codeandname;
        console.log(this.stationlist);
      }     
      }
    )
  }

*{margin:0; padding:0;}

#Black{
       width:100%;
	   height:100%;
	   background:black;
	   color:white;
	   position:fixed;
	  }

#White{
       width:600px;
	   height:auto;
	   background:rgba(255,255,255,0.1);
	   color:white;
	   margin:100px auto;
	  }	  
	  
#Prog{
      width:100%;
	  height:20px;
	  background:rgba(255,255,255,0.1);
	  color:white;
	 }
	 
#Pro{
     width:0%;
	 height:20px;
	 background:linear-gradient(to bottom, rgba(33,150,243,1) 50%, rgba(33,150,243,0.9) 50%);
	}
	
#FirstName::selection, #LastName::selection, #FullName::selection, #PSW::selection, #MPSW::selection{
                                                                                                     background:white;
		                                                                                             color:black;
		                                                                                            }
	
#FirstName, #LastName, #FullName, #PSW, #MPSW{
                                              width:400px;
	                                          height:auto;
	                                          padding:20px;
	                                          background:black;
	                                          color:white;
	                                          outline:none;
	                                          margin:20px 80px;
	                                          border:2px solid white;
	                                         }
	
#FirstName::placeholder, #LastName::placeholder, #FullName::placeholder, #PSW::placeholder, #MPSW::placeholder{
                                                                                                               user-select:none;
																											  }
	
#Register{
          width:200px;
		  height:auto;
		  padding:20px;
		  background:black;
		  color:white;
		  outline:none;
		  border:2px solid white;
		  margin-left:200px;
		  margin-bottom:20px;
		  cursor:pointer;
		 }
		 
#Register:hover{
                background:linear-gradient(to bottom, rgba(33,155,243,1) 50%, rgba(33,155,243,0.9) 50%);
				color:white;
				border:2px solid white;
			   }

谢谢

Answer 1

您可以为每个keypress的{​​{1}}事件添加一个事件侦听器，以将进度提高20％（仅在输出字符时才触发按键）。

您还可以为每个input的{​​{1}}事件添加事件侦听器，并检查keyCode是否为8（退格键）以及{{ 1}}是keydown（在这种情况下，字符将被删除），将从进度中删除20％。

JSFiddle：this JSFiddle

input

input