Jquery 多步骤进度条在输入字段中输入键时更改状态

.字体{
边缘顶部：3rem；
}
.动画{
动画：动画-1 0.5s线性；
}
@关键帧动画-1{
0% {
底部：-100px；
不透明度：0；
}
50% {
底部：-25px；
不透明度：0.5；
}
100% {
底部：0px；
不透明度：1；
}
}
.字体p{
字体大小：20px！重要；
}
.ip元素{
填充：10px 0px；
宽度：80%；
边界：0px；
左边距：40px；
字体大小：20px；
背景：透明；
}
.ip元素{
大纲：无；
}
.好的{
边缘顶部：10px；
左边距：40px；
颜色：#ccc；
}
/*.好的{*/
/*边缘顶部：10px*/
/*文字装饰：无*/
/*填充：10px 17px*/
/*颜色：#fff！重要*/
/*背景：#00aae7*/
/*字体大小：粗体*/
/*过渡：均为0.3秒*/
/*光标：指针*/
/*}*/
.zoom{
动画：缩放0.2s线性；
}
@关键帧缩放{
0%{
变换：比例（0）；
}
50%{
变换：比例（0.5）；
}
100%{
变换：比例（1）；
}
}
.名单{
字号：18px；
右侧填充：5px；
}
.输入元素{
位置：相对位置；
}
.闪光灯{
位置：绝对位置；
顶部：9.5px；
左：35px；
动画：闪烁800ms线性无限；
不透明度：1；
字体大小：24px；
}
@关键帧闪烁{
从{
位置：绝对位置；
不透明度：1；
}
到{
位置：绝对位置；
不透明度：0；
}
}
.ip元素：焦点。闪烁{
显示：无；
}
.ip元素：：占位符{
颜色：#777777；
字体大小：400；
}
.边界btm{
边框底部：2个实心#ccc；
}
#提交mesg{
边缘顶部：7雷姆；
文本对齐：居中！重要；
颜色：#00aae7；
字体大小：20px！重要；
字号：900；
}
.推{
文字装饰：无；
边缘顶部：5雷姆；
颜色：#fff；
光标：指针；
背景：#00aae7；
填充：10px 17px；
显示：内联块；
颜色：#fff！重要；
光标：指针；
}
/*多步骤*/
.multi-steps>li.is-active:before、.multi-steps>li.is-active~li:before{
内容：计数器（stepNum）；
字体家族：继承；
字号：700；
}
.multi-steps>li.is-active:after、.multi-steps>li.is-active~li:after{
背景色：#ededed；
}
.多步骤{
显示：表格；
表布局：固定；
宽度：100%；
}
.多步骤>li{
计数器增量：stepNum；
文本对齐：居中；
显示：表格单元格；
位置：相对位置；
颜色：#d8f2fe；
}
.多步骤>li:之前{
内容：“\f00c”；
内容：“\2713；”；
内容：“\10003”；
内容：“\10004”；
内容：“\2713”；
显示：块；
利润率：0自动4倍；
背景色：#fff；
宽度：36px；
高度：36px；
线高：32px；
文本对齐：居中；
字体大小：粗体；
边框宽度：2倍；
边框样式：实心；
边框颜色：#2368a0；
边界半径：50%；
}
.多步骤>li:之后{
内容：“；
高度：2倍；
宽度：100%；
背景色：#2368a0；
位置：绝对位置；
顶部：16px；
左：50%；
z指数：-1；
}
.multi-steps>li:最后一个子项：之后{
显示：无；
}
.multi-steps>li.处于活动状态：之前{
背景色：#003f6d；
边框颜色：#003f6d；
}
.multi-steps>li.is-active~li{
颜色：#808080；
}
.multi-steps>li.is-active~li:before{
背景色：#ededed；
边框颜色：#ededed；
}

1→；你叫什么名字*

|
按回车键→；
2→；你姓什么*

|
按回车键→；
3→；让我们知道你的电子邮件地址*

|
按回车键→；
4→；你的电话号码*

|
按回车键→；
✔；我们收到了你的申请
提交
$（'.nextelement'）.hide（）；
//$（'.nexto'）。在（'click'，函数（事件）{
//$（this）.closest（'.typeform元素'）.hide（）；
//$（this）.closest（'.typeform元素'）.next（'.nextelement'）.show（）；
//$（this）.closest（'.typeform元素'）。next（'.typeform元素'）。toggleClass（'animations'）；
// });
$（'.nexto'）.hide（）；
$（'.ok btn'）.hide（）；
所需变量=$（“输入[所需]”）；
必需。开启（'keyup'，功能（事件）{
$（this）.closest（'.typeform元素'）.find（'.ok btn'）.show（）；
如果（event.key==“输入”）{
$（this）.closest（'.typeform元素'）.hide（）；
$（this）.closest（'.typeform元素'）.next（'.nextelement'）.show（）；
$（this）.closest（'.typeform元素'）。next（'.typeform元素'）。toggleClass（'animations'）；
}
});
$（'.ip元素'）。在（'click'，函数（事件）{
$（this.addClass（'border-btm'）；
$（thi）
$('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')
  }
});

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