Состояние многоступенчатого индикатора прогресса при вводе ключа в поле ввода - PullRequest
Новая
       1

Состояние многоступенчатого индикатора прогресса при вводе ключа в поле ввода

2 голосов
/ 27 февраля 2020 

<style>
  .typeform {
  margin-top:3rem;
  }
  .animations {
  animation: animation-1 0.5s linear;
  }
  @keyframes animation-1 {
  0% {
  bottom: -100px;
  opacity: 0;
  }
  50% {
  bottom: -25px;
  opacity: 0.5;
  }
  100% {
  bottom: 0px;
  opacity: 1;
  }
  }
  .typeform p {
  font-size: 20px !important;
  }
  .ip-element {
  padding: 10px 0px;
  width: 80%;
  border: 0px;
  margin-left:40px;
  font-size: 20px;
  background: transparent;
  }
  .ip-element {
  outline: none;
  }
  .ok-btn {
  margin-top: 10px;
  margin-left: 40px;
  color: #ccc;
  }
  /*.ok-btn a {*/
  /*    margin-top: 10px;*/
  /*    text-decoration: none;*/
  /*    padding: 10px 17px;*/
  /*    color: #fff !important;*/
  /*    background: #00aae7;*/
  /*    font-weight: bold;*/
  /*    transition: all 0.3s;*/
  /*    cursor: pointer;*/
  /*}*/
  .zoom{
  animation:zoom 0.2s linear;
  }
  @keyframes zoom{
  0%{
  transform:scale(0);
  }
  50%{
  transform:scale(0.5);	
  }
  100%{
  transform:scale(1);	
  }
  }
  .list {
  font-size: 18px;
  padding-right: 5px;
  }
  .input-element {
  position: relative;
  }
  .blinker {
  position: absolute;
  top:9.5px;
  left: 35px;
  animation: blink 800ms linear infinite;
  opacity: 1;
  font-size: 24px;
  }
  @keyframes blink {
  from {
  position: absolute;
  opacity: 1;
  }
  to {
  position: absolute;
  opacity: 0;
  }
  }
  .ip-element:focus .blinker{
  display: none;
  }
  .ip-element::placeholder{
  color:#777777;
  font-weight: 400;
  }
  .border-btm{
  border-bottom:2px solid #ccc;
  }
  #submit-mesg{
  margin-top: 7rem;
  text-align: center !important;
  color: #00aae7;
  font-size: 20px !important;
  font-weight: 900;
  }
  .push{
  text-decoration: none;
  margin-top:5rem;
  color: #fff;
  cursor: pointer;
  background: #00aae7;
  padding: 10px 17px;
  display: inline-block;
  color:#fff !important;
  cursor:pointer;
  }
  /*multistep*/
  .multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
  content: counter(stepNum);
  font-family: inherit;
  font-weight: 700;
  }
  .multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
  background-color: #ededed;
  }
  .multi-steps {
  display: table;
  table-layout: fixed;
  width: 100%;
  }
  .multi-steps > li {
  counter-increment: stepNum;
  text-align: center;
  display: table-cell;
  position: relative;
  color:#d8f2fe;
  }
  .multi-steps > li:before {
  content: "\f00c";
  content: "\2713;";
  content: "\10003";
  content: "\10004";
  content: "\2713";
  display: block;
  margin: 0 auto 4px;
  background-color: #fff;
  width: 36px;
  height: 36px;
  line-height: 32px;
  text-align: center;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-color: #2368a0;
  border-radius: 50%;
  }
  .multi-steps > li:after {
  content: "";
  height: 2px;
  width: 100%;
  background-color: #2368a0;
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: -1;
  }
  .multi-steps > li:last-child:after {
  display: none;
  }
  .multi-steps > li.is-active:before {
  background-color: #003f6d;
  border-color: #003f6d;
  }
  .multi-steps > li.is-active ~ li {
  color: #808080;
  }
  .multi-steps > li.is-active ~ li:before {
  background-color: #ededed;
  border-color: #ededed;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
                    <div class="container-fluid">
                      <br><br>
                      <ul class="list-unstyled multi-steps">
                        <li class="s1 is-active"></li>
                        <li class="s2 add"></li>
                        <li class="s3"></li>
                        <li class="s4"></li>
                      </ul>
                    </div>
                </div>
                <div class="col-md-12 mb-2" style="position:relative">
                  <div class="typeform">
                    <div class="col-md-12 typeform-element">
                      <p><span class="list">1</span>&#8594;What's your First Name? *</p>
                      <div class="input-element">
                        <input type="text" name="fname" placeholder="Type your answer..." required class="ip-element" id="fname"> 
                        <span class="blinker">|</span>
                      </div>
                      <div class="ok-btn">
                        <span>Press Enter&#8594;</span>
                      </div>
                    </div>
                    <div class="col-md-12 typeform-element nextelement">
                      <p><span class="list">2</span>&#8594;What's Your Last Name? *</p>
                      <div class="input-element">
                        <input type="text" name="lname" placeholder="Type your answer..." required class="ip-element" id="lname">
                        <span class="blinker">|</span>
                      </div>
                      <div class="ok-btn">
                        <span>Press Enter&#8594;</span>
                      </div>
                    </div>
                    <div class="col-md-12 typeform-element nextelement">
                      <p><span class="list">3</span>&#8594;Let's know your Email Address*</p>
                      <div class="input-element">
                        <input type="email" name="email" placeholder="Type your answer..." required class="ip-element" id="emails">
                        <span class="blinker">|</span>
                      </div>
                      <div class="ok-btn">
                        <span>Press Enter&#8594;</span>
                      </div>
                    </div>
                    <div class="col-md-12 typeform-element nextelement">
                      <p><span class="list">4</span>&#8594;Your Phone Number*</p>
                      <div class="input-element">
                        <input type="text" name="phonenumber" placeholder="Type your answer..." required class="ip-element" id="pnumber">
                        <span class="blinker">|</span>
                      </div>
                      <div class="ok-btn">
                        <span>Press Enter&#8594;</span>
                      </div>
                    </div>
                    <div class="col-md-12  nextelement" style="text-align:center">
                      <p id="submit-mesg">&#10004; We recieved your Application</p>
                      <a class="push">Submit</a>
                    </div>
                  </div>
                </div>
<script>
  $('.nextelement').hide();
  
     // $('.nexto').on('click', function (event) {
     // 	$(this).closest('.typeform-element').hide();
     // 	$(this).closest('.typeform-element').next('.nextelement').show();
     //     $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
     // });
  
  
     $('.nexto').hide();
     $('.ok-btn').hide();
  
  var required = $('input[required]');
  required.on('keyup', function (event) {
   $(this).closest('.typeform-element').find('.ok-btn').show();
    
  if(event.key == "Enter"){
  	$(this).closest('.typeform-element').hide();
     	$(this).closest('.typeform-element').next('.nextelement').show();
         $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
  }
  });
  
  
     $('.ip-element').on('click', function (event) {
         $(this).addClass('border-btm');
         $(this).next('.blinker').css('display', 'none');
     })
  
      $('#submit-mesg').hide();
         
         $(".push").on('click', function(event){
         	$('#submit-mesg').addClass('zoom');
             $('#submit-mesg').show();
             $(this).hide();
         })
     // 
</script>                
<ul class="list-unstyled multi-steps">
  <li class="is-active"></li>
  <li class="add"></li>
  <li></li>
  <li></li>
  <li ></li>
</ul>
<div class="typeform">
  <div class="col-md-12 typeform-element">
    <p><span class="list">1</span>&#8594;What's your First Name? *</p>
    <div class="input-element">
      <input type="text" name="fname" placeholder="Type your answer..." required class="ip-element" > 
      <span class="blinker">|</span>
    </div>
    <div class="ok-btn">
      <span>Press Enter&#8594;</span>
    </div>
  </div>
  <div class="col-md-12 typeform-element nextelement">
    <p><span class="list">2</span>&#8594;What's Your Last Name? *</p>
    <div class="input-element">
      <input type="text" name="lname" placeholder="Type your answer..." required class="ip-element" >
      <span class="blinker">|</span>
    </div>
    <div class="ok-btn">
      <span>Press Enter&#8594;</span>
    </div>
  </div>
  <div class="col-md-12 typeform-element nextelement">
    <p><span class="list">3</span>&#8594;Let's know your Email Address*</p>
    <div class="input-element">
      <input type="email" name="email" placeholder="Type your answer..." required class="ip-element">
      <span class="blinker">|</span>
    </div>
    <div class="ok-btn">
      <span>Press Enter&#8594;</span>
    </div>
  </div>
  <div class="col-md-12 typeform-element nextelement">
    <p><span class="list">4</span>&#8594;Your Phone Number*</p>
    <div class="input-element">
      <input type="text" name="phonenumber" placeholder="Type your answer..." required class="ip-element">
      <span class="blinker">|</span>
    </div>
    <div class="ok-btn">
      <span>Press Enter&#8594;</span>
    </div>
  </div>
  <div class="col-md-12  nextelement" style="text-align:center">
    <p id="submit-mesg">&#10004; We recieved your Application</p>
    <a class="push">Submit</a>
  </div>
</div>


$('input[required]').on('keyup', function (event) {
  if(event.key == "Enter") {
      $(this).closest('.typeform-element').hide();
    $(this).closest('.typeform-element').next('.nextelement').show();
       $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
       $('.multi-steps').closest('li').prev('li').toggleClass('is-active');
  }
});

Я использовал приведенный выше код jquery, чтобы добавить класс «is-active» для следующего элемента списка и удалить «is-active» класс из предыдущего элемента из списка с классом 'multi-steps' при вводе клавиши ENTER в каждом поле ввода.

Когда я нажимаю клавишу ввода в каждом поле ввода, многоступенчатый индикатор выполнения должен добавить 'is -active 'класс для следующего элемента списка и удалить' is-active 'из предыдущего элемента списка.

Как это можно сделать?

Ответы [ 2 ]

2 голосов
/ 27 февраля 2020

Вы можете использовать этот код: 

$('input[required]').on('keyup', function (event) {
  if(event.key == "Enter") {
      $(this).closest('.typeform-element').hide();
    $(this).closest('.typeform-element').next('.nextelement').show();
       $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
    let activeLi = $('.multi-steps li.is-active');
    activeLi.next('li').toggleClass('is-active');
    activeLi.toggleClass('is-active')
  }
});

Он сохраняет активный li в activeLi var, а затем переключает следующий элемент li перед переключением самого класса.

Вы можете видеть, как он работает в https://codepen.io/jeprubio/pen/ZEGKYYM

1 голос
/ 27 февраля 2020

Просто добавьте приведенный ниже блок кода в условие if(). 

var el = $('.is-active');
el.removeClass('is-active');
el.next().addClass('is-active');

Что он на самом деле делает, так это получает активный элемент с классом is-active, затем удаляет класс из него и добавляет его к следующему узлу.

Проверьте фрагмент для рабочей демонстрации 

$('.nextelement').hide();

  // $('.nexto').on('click', function (event) {
  // 	$(this).closest('.typeform-element').hide();
  // 	$(this).closest('.typeform-element').next('.nextelement').show();
  //     $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
  // });


  $('.nexto').hide();
  $('.ok-btn').hide();

  var required = $('input[required]');
  required.on('keyup', function(event) {
    $(this).closest('.typeform-element').find('.ok-btn').show();

    if (event.key == "Enter") {
      $(this).closest('.typeform-element').hide();
      $(this).closest('.typeform-element').next('.nextelement').show();
      $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
      var el = $('.is-active');
      el.removeClass('is-active');
      el.next().addClass('is-active');
    }
  });


  $('.ip-element').on('click', function(event) {
    $(this).addClass('border-btm');
    $(this).next('.blinker').css('display', 'none');
  })
  
   $('#submit-mesg').hide();

  $(".push").on('click', function(event) {
    $('#submit-mesg').addClass('zoom');
    $('#submit-mesg').show();
    $(this).hide();
  })
  //
.typeform {
  margin-top: 3rem;
}

.animations {
  animation: animation-1 0.5s linear;
}

@keyframes animation-1 {
  0% {
    bottom: -100px;
    opacity: 0;
  }
  50% {
    bottom: -25px;
    opacity: 0.5;
  }
  100% {
    bottom: 0px;
    opacity: 1;
  }
}

.typeform p {
  font-size: 20px !important;
}

.ip-element {
  padding: 10px 0px;
  width: 80%;
  border: 0px;
  margin-left: 40px;
  font-size: 20px;
  background: transparent;
}

.ip-element {
  outline: none;
}

.ok-btn {
  margin-top: 10px;
  margin-left: 40px;
  color: #ccc;
}


/*.ok-btn a {*/


/*    margin-top: 10px;*/


/*    text-decoration: none;*/


/*    padding: 10px 17px;*/


/*    color: #fff !important;*/


/*    background: #00aae7;*/


/*    font-weight: bold;*/


/*    transition: all 0.3s;*/


/*    cursor: pointer;*/


/*}*/

.zoom {
  animation: zoom 0.2s linear;
}

@keyframes zoom {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

.list {
  font-size: 18px;
  padding-right: 5px;
}

.input-element {
  position: relative;
}

.blinker {
  position: absolute;
  top: 9.5px;
  left: 35px;
  animation: blink 800ms linear infinite;
  opacity: 1;
  font-size: 24px;
}

@keyframes blink {
  from {
    position: absolute;
    opacity: 1;
  }
  to {
    position: absolute;
    opacity: 0;
  }
}

.ip-element:focus .blinker {
  display: none;
}

.ip-element::placeholder {
  color: #777777;
  font-weight: 400;
}

.border-btm {
  border-bottom: 2px solid #ccc;
}

#submit-mesg {
  margin-top: 7rem;
  text-align: center !important;
  color: #00aae7;
  font-size: 20px !important;
  font-weight: 900;
}

.push {
  text-decoration: none;
  margin-top: 5rem;
  color: #fff;
  cursor: pointer;
  background: #00aae7;
  padding: 10px 17px;
  display: inline-block;
  color: #fff !important;
  cursor: pointer;
}


/*multistep*/

.multi-steps>li.is-active:before,
.multi-steps>li.is-active~li:before {
  content: counter(stepNum);
  font-family: inherit;
  font-weight: 700;
}

.multi-steps>li.is-active:after,
.multi-steps>li.is-active~li:after {
  background-color: #ededed;
}

.multi-steps {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.multi-steps>li {
  counter-increment: stepNum;
  text-align: center;
  display: table-cell;
  position: relative;
  color: #d8f2fe;
}

.multi-steps>li:before {
  content: "\f00c";
  content: "\2713;";
  content: "\10003";
  content: "\10004";
  content: "\2713";
  display: block;
  margin: 0 auto 4px;
  background-color: #fff;
  width: 36px;
  height: 36px;
  line-height: 32px;
  text-align: center;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-color: #2368a0;
  border-radius: 50%;
}

.multi-steps>li:after {
  content: "";
  height: 2px;
  width: 100%;
  background-color: #2368a0;
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: -1;
}

.multi-steps>li:last-child:after {
  display: none;
}

.multi-steps>li.is-active:before {
  background-color: #003f6d;
  border-color: #003f6d;
}

.multi-steps>li.is-active~li {
  color: #808080;
}

.multi-steps>li.is-active~li:before {
  background-color: #ededed;
  border-color: #ededed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="container-fluid">
    <br><br>
    <ul class="list-unstyled multi-steps">
      <li class="s1 is-active"></li>
      <li class="s2"></li>
      <li class="s3"></li>
      <li class="s4"></li>
    </ul>
  </div>
</div>
<div class="col-md-12 mb-2" style="position:relative">
  <div class="typeform">
    <div class="col-md-12 typeform-element">
      <p><span class="list">1</span>&#8594;What's your First Name? *</p>
      <div class="input-element">
        <input type="text" name="fname" placeholder="Type your answer..." required class="ip-element" id="fname">
        <span class="blinker">|</span>
      </div>
      <div class="ok-btn">
        <span>Press Enter&#8594;</span>
      </div>
    </div>
    <div class="col-md-12 typeform-element nextelement">
      <p><span class="list">2</span>&#8594;What's Your Last Name? *</p>
      <div class="input-element">
        <input type="text" name="lname" placeholder="Type your answer..." required class="ip-element" id="lname">
        <span class="blinker">|</span>
      </div>
      <div class="ok-btn">
        <span>Press Enter&#8594;</span>
      </div>
    </div>
    <div class="col-md-12 typeform-element nextelement">
      <p><span class="list">3</span>&#8594;Let's know your Email Address*</p>
      <div class="input-element">
        <input type="email" name="email" placeholder="Type your answer..." required class="ip-element" id="emails">
        <span class="blinker">|</span>
      </div>
      <div class="ok-btn">
        <span>Press Enter&#8594;</span>
      </div>
    </div>
    <div class="col-md-12 typeform-element nextelement">
      <p><span class="list">4</span>&#8594;Your Phone Number*</p>
      <div class="input-element">
        <input type="text" name="phonenumber" placeholder="Type your answer..." required class="ip-element" id="pnumber">
        <span class="blinker">|</span>
      </div>
      <div class="ok-btn">
        <span>Press Enter&#8594;</span>
      </div>
    </div>
    <div class="col-md-12  nextelement" style="text-align:center">
      <p id="submit-mesg">&#10004; We recieved your Application</p>
      <a class="push">Submit</a>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...