javascript - 水平步进断表

我制作的水平步进表单的布局存在问题，基本上，当我在任何一个步骤上按TAB键时，焦点最终都转到了下一个不可见的选项卡，并且使表单出错，我按下等效的向下键，然后在输入中查看历史记录。

const $ = document.querySelector.bind(document),
	$$ = document.querySelectorAll.bind(document)

const tabs = [ ...$$('.tab') ]

$('.total-steps').innerText = tabs.length

let currentTab = 0
showTab(currentTab)

function showTab(n) {
	tabs[n].classList.remove('hidden')
	tabs[n].classList.add('with-dalay')

	/* const currentInput = dec => tabs[n - dec].querySelector('input:not([type=number])')

	if (currentInput(0)) {
		console.log(currentInput(0))
		if (tabs[n - 1] &&  currentInput(1) && n >= 1) currentInput(1).blur()
		currentInput(0).focus()
	} */

	if (n == 0) {
		$('#prevBtn').disabled = true
		$('#prevBtn').innerText = ''
	}
	else {
		$('#prevBtn').disabled = false
		$('#prevBtn').innerText = 'voltar'
	}
	if (n == tabs.length - 1) {
		$('#nextBtn').innerText = 'concluir'
	}
	else {
		$('#nextBtn').innerText = 'próximo'
	}
}

function nextPrev(n, e) {
	if (tabs.length - 1 !== n) e.preventDefault()

	const currentStep = currentTab + n

	if (currentStep <= tabs.length)
		$('.current-step').innerText = currentStep + 1

	if (n == 1 && validateForm()) return

	tabs[currentTab].classList.add('hidden')
	tabs[currentTab].classList.remove('with-dalay')

	currentTab = currentStep

	if (currentTab >= tabs.length) {
		$('#regForm').submit()
		return false
	}

	showTab(currentTab)
}

function validateForm() {
	const inputs = [ ...tabs[currentTab].querySelectorAll('input') ]
	let valid = false

	inputs.forEach(input => {
		input.classList.remove('invalid')
		input.classList.add('valid')
		if (!input.value) {
			input.classList.add('invalid')
			input.classList.remove('valid')
			valid = true
		}
	})

	return valid
}

$('#prevBtn').addEventListener('click', e => nextPrev(-1, e))
$('#nextBtn').addEventListener('click', e => nextPrev(1, e))
;[ ...$$('input') ].forEach(input => {
	input.addEventListener('change', ({ target }) =>
		target.classList.add('valid')
	)
})

$('.add').addEventListener('click', () => {
	const product = document.createRange().createContextualFragment($('.product').outerHTML)
	// const product = new DOMParser().parseFromString($('.product').outerHTML, 'text/html').body.firstChild
	$('.loading-wrapper').classList.remove('loading-hide')
	$('#nextBtn').disabled = true

	setTimeout(() => {
		$('.loading-wrapper').classList.add('loading-hide')
		$('.products-list').insertBefore(product, $('.products-list').childNodes[2])
		$('#nextBtn').disabled = false
	}, 3000)
})

function removeItem({ parentNode }) {
	const willRemoved = confirm('Tem certeza que deseja remover este item?')

	if (willRemoved) $('.products-list').removeChild(parentNode.parentNode)
}

const amount = $('.amount')

function removeAmount({ parentNode }) {
	const input = parentNode.children[1]
	if (input.value > 1) {
		input.value = input.value - 1
	}
}

function addAmount({ parentNode }) {
	const input = parentNode.children[1]
	input.value = parseInt(input.value) + 1
}

* {
	box-sizing: border-box;
	outline: 0;
}

button:hover,
button:active,
button:focus {
	outline: 0;
}

h1 {
	margin: 0;
	padding: 40px 0 20px;
}

body {
	font-family: 'Roboto', sans-serif;
	background-color: #5b5b5b;
	color: #323232;
	margin: 0;
	padding: 0;
}

.App {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	height: 100vh;
	width: 100vw;
}

.App:before {
	content: '';
	background-image: url('https://www.jotform.com/uploads/anil/form_files/bryan-minear-315773.901.jpg');
	filter: sepia(65%) brightness(.5);
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-size: cover;
	position: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	pointer-events: none;
	z-index: 0;
}

#regForm {
	width: 57%;
	min-width: 250px;
	border-radius: 6px;
	overflow: hidden;
	z-index: 1;
}

.tabs-wrapper {
	display: flex;
	position: relative;
	overflow: hidden;
	background-color: #fff;
}

h1 {
	text-align: center;
	background-color: #fff;
}

input {
	padding: 10px;
	width: 100%;
	font-size: 17px;
	background-color: transparent;
	border: 1px solid #aaaaaa;
	border-radius: 3px;
	transition: border .2s linear;
	z-index: 1;
}

input:focus,
input:active {
	border-color: #4a85ef;
	box-shadow: 0 0 0 2px rgba(72, 130, 239, .3);
}

input.valid {
	border-color: #00af00;
	box-shadow: 0 0 0 2px rgba(0, 175, 0, .3);
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
	border-color: #e34343;
	box-shadow: 0 0 0 2px rgba(227, 68, 68, .3);
}

/* Hide all steps by default: */
.tab {
	display: flex;
	flex-direction: column;
	padding: 40px 0;
	background-color: #fff;
	width: 100%;
	transition: all 0.6s;
	opacity: 1;
}

.tab > * {
	padding: 0 40px;
}

.long-tab {
	overflow-y: auto;
	/* margin-bottom: 25px; */
	max-height: 85vh;
}

.tab p {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.tab p input + input {
	margin-left: 2%;
}

.hidden {
	position: absolute;
	transform: translateX(100%);
	opacity: 0;
}

.with-dalay {
	transition-delay: 0.5s;
}

.buttons-wrapper {
	display: flex;
	width: 100%;
	background-color: #fff;
}

button {
	background-color: #ffff00;
	color: #000;
	border: none;
	padding: 15px 40px;
	font-size: 1.2em;
	font-weight: 400;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	width: 100%;
	cursor: pointer;
	transition: all .2s linear;
}

button:hover {
	background-color: #d9d900;
	color: white;
}

button:disabled {
	background-color: #dfdf00;
}

#prevBtn {
	text-align: left;
}

#nextBtn {
	text-align: right;
}

.steps-wrapper {
	text-align: center;
	color: #d2d2d2;
	z-index: 1;
	font-size: 16px;
	background-color: rgba(0, 0, 0, .35);
	padding: 10px;
	border-radius: 4px;
	min-width: 130px;
	letter-spacing: 1px;
}

.steps-wrapper span {
	color: #fff;
	opacity: 0.7;
}

.steps-wrapper span:first-child {
	opacity: 1;
}

.question-wrapper {
	margin: 10px 0 0;
}

.question-wrapper .question {
	font-size: 15px;
}

.question-wrapper .required {
	color: #e34343;
	font-size: 1em;
}

.question-description {
	font-size: 12px;
	color: #7c7c7c;
}

.warning {
	font-size: 10pt;
}

.warning p {
	line-height: 1.5em;
}

.warning ol {
	padding: 0 40px 0 53px;
}

.warning ol li {
	text-align: justify;
	line-height: 1.5em;
}

.warning ol li:first-child {
	margin-bottom: 25px;
}

.warning ol li span {
	text-decoration: underline;
}

.flex-container input.short-input {
	width: 30%;
}

.add {
	font-size: 26px;
	width: 35px;
	height: 35px;
	text-align: center;
	border: 1px solid gainsboro;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	margin-left: 10px;
	cursor: pointer;
	transition: all .2s ease;
}

.add:hover {
	background-color: gainsboro;
}

.place-holder {
	position: absolute;
	font-size: 14px;
	left: 52px;
	color: #9f9f9f;
	transition: all .5s ease;
	top: 14px;
}

input[name=aLink]:focus + span.place-holder {
	top: 50px;
	font-size: 12px;
}

input[name="aLink"]:not(:placeholder-shown) + span.place-holder {
	top: 50px;
	font-size: 12px;
}

#cart {
	padding: 1.5em 0;
}

div.cart-header {
	display: flex;
	padding-bottom: 10px;
	border-bottom: 2px solid gainsboro;
	flex-wrap: wrap;
}

.cart-header span:first-child {
	flex: 1 300px;
}

.cart-header span:first-child span {
	color: #16b451;
	font-size: 1.1em;
}

.cart-header span:last-child {
	font-size: small;
	text-align: justify;
	font-style: italic;
	flex: 1 55%;
}

.products-list {
	overflow-y: auto;
	max-height: 45vh;
	border-bottom: 1px solid gainsboro;
}

.product {
	width: 100%;
	overflow-y: hidden;
	padding: 20px 0;
	border-bottom: 1px solid #e6e9ed;
	display: block;
	transition: 0.3s;
}

.product:last-child {
	border-bottom: none;
}

.product .product-header {
	display: flex;
	align-items: center;
	justify-content: center;
}

.product .remove {
	color: tomato;
	cursor: pointer;
	font-size: 26px;
	margin-left: 10px;
	transition: color .2s linear;
}

.product .remove:hover {
	color: #ce2000;
}

.products-list .description {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	font-size: 13px;
}

.products-list img {
	width: 100px;
}

.products-list .description > div:last-child {
	display: flex;
	flex-direction: column;
}

.description > div:nth-child(2) {
	display: flex;
	flex-direction: column;
}

.description .remove:hover {
	color: tomato;
}

.products-list .description .dolar-price {
	font-weight: bold;
}

.products-list .description .from-amazon {
	color: gray;
	text-decoration: line-through;
}

.products-list .description .from-glin {
	color: #16b451;
	font-size: 1.2em;
	font-weight: bold;
}

.products-list .description .economy {
	color: #16b451;
}

.products-list .description .shippment {
	margin-top: 15px;
}
.products-list .description .amount-wrapper {
	display: flex;
	align-items: center;
	margin: 5px 0;
}

.products-list .description .amount-controls {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-left: 10px;
	align-items: center;
	border: 1px solid #ccc;
}
.products-list .description .controls {
	padding: 0 10px;
	cursor: pointer;
}

.products-list .description .amount {
	width: 45px;
	font-size: 13px;
	-moz-appearance: textfield;
	border-radius: 0;
	text-align: center;
	border: none;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 5px 10px;
}

.products-list .description .arrives {
	font-weight: bold;
}

.loading {
	margin: 30px auto 0;
	border: 5px solid #d9d9d9;
	border-radius: 50%;
	border-top: 5px solid yellow;
	width: 100px;
	height: 100px;
	animation: spin 2s linear infinite;
}

.loading-wrapper p {
	color: #959595;
}

.loading-hide {
	display: none;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@media (max-width: 575.98px) {
	.tab > * {
		padding: 0 20px;
	}

	.place-holder {
		top: 10px;
		left: 32px;
	}

	input[name=aLink]:focus + span.place-holder {
		top: 45px;
	}

	input[name=aLink]:not(:placeholder-shown) + span.place-holder {
		top: 45px;
	}

	button {
		font-size: 14px;
	}

	.flex-container input {
		font-size: 12px;
	}
}

@media (max-width: 855px) {
	#regForm {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		border-radius: 0;
		background-color: #fff;
	}

	.products-list {
		max-height: 75vh;
		height: 55vh;
	}

	.steps-wrapper {
		width: 100%;
		margin-top: 0;
		background-color: #5b5b5b;
	}
}

@media (max-width: 487px) {
	input {
		font-size: 12px;
	}
}

@media (max-width: 414px) {
	#regForm {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		border-radius: 0;
		background-color: #fff;
	}

	.tab p:not(.flex-container) {
		flex-wrap: wrap;
	}

	.tab p:not(.flex-container) input[name=email] {
		margin: 10px 0;
	}

	.loading-wrapper p {
		font-size: 15px
	}

	.steps-wrapper {
		width: 100%;
		margin-top: 0;
		background-color: #5b5b5b;
	}
}

<div class="App">
		<form id="regForm">
			<div class="tabs-wrapper">
				<div class="tab">
					<label class="question-wrapper">
						<span class="question">Como você gostaria de ser chamado(a)?</span>
						<span class="required"> *</span>
					</label>
					<span class="question-description">Assim fica mais legal conversarmos :)</span>
					<p><input placeholder="Seu nome" name="fname"></p>
				</div>
				<div class="tab hidden with-dalay">
					<label class="question-wrapper">
						<span class="question">Legal, {fulano}. E qual o seu e-mail para contato?</span>
						<span class="required"> *</span>
					</label>
					<span class="question-description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, officia.</span>
					<p>
						<input placeholder="e-mail" name="email">
						<input placeholder="confirmar e-mail" name="email">
					</p>
				</div>

				<div class="tab hidden with-dalay">
					<label class="question-wrapper">
						<span class="question">Lorem ipsum dolor sit amet.</span>
					</label><span class="question-description">
						Lorem ipsum dolor sit.
					</span>
					<p><input placeholder="lorem ipsum" name="cupomCode"></p>
				</div>

			</div>
			<div class="buttons-wrapper">
				<button type="button" class="btn" id="prevBtn">voltar</button>
				<button type="submit" class="btn" id="nextBtn">próximo</button>
			</div>
		</form>
	</div>

最佳答案

您可以为文档添加keydown事件监听器，并使用event.preventDefault()停止制表符事件并集中在所需的元素上：

document.addEventListener("keydown", (event) => {
  console.log($(":focus"), event.which);
  if (event.target.name == "fname" && event.keyCode == 9) {
    event.preventDefault();
    $("#nextBtn").focus();
  }
});

const $ = document.querySelector.bind(document),
  $$ = document.querySelectorAll.bind(document);

const tabs = [...$$('.tab')];

//$('.total-steps').innerText = tabs.length;

let currentTab = 0;

document.addEventListener("keydown", (event) => {
  console.log($(":focus"), event.which);
  if (event.target.name == "fname" && event.keyCode == 9) {
    event.preventDefault();
    $("#nextBtn").focus();
  }
});

showTab(currentTab);

function showTab(n) {
  tabs[n].classList.remove('hidden')
  tabs[n].classList.add('with-dalay')

  /* const currentInput = dec => tabs[n - dec].querySelector('input:not([type=number])')

  if (currentInput(0)) {
  	console.log(currentInput(0))
  	if (tabs[n - 1] &&  currentInput(1) && n >= 1) currentInput(1).blur()
  	currentInput(0).focus()
  } */

  if (n == 0) {
    $('#prevBtn').disabled = true
    $('#prevBtn').innerText = ''
  } else {
    $('#prevBtn').disabled = false
    $('#prevBtn').innerText = 'voltar'
  }
  if (n == tabs.length - 1) {
    $('#nextBtn').innerText = 'concluir'
  } else {
    $('#nextBtn').innerText = 'próximo'
  }
}

function nextPrev(n, e) {
  if (tabs.length - 1 !== n) e.preventDefault()

  const currentStep = currentTab + n

  if (currentStep <= tabs.length)
    $('.current-step').innerText = currentStep + 1

  if (n == 1 && validateForm()) return

  tabs[currentTab].classList.add('hidden')
  tabs[currentTab].classList.remove('with-dalay')

  currentTab = currentStep

  if (currentTab >= tabs.length) {
    $('#regForm').submit()
    return false
  }

  showTab(currentTab)
}

function validateForm() {
  const inputs = [...tabs[currentTab].querySelectorAll('input')]
  let valid = false

  inputs.forEach(input => {
    input.classList.remove('invalid')
    input.classList.add('valid')
    if (!input.value) {
      input.classList.add('invalid')
      input.classList.remove('valid')
      valid = true
    }
  })

  return valid
}

$('#prevBtn').addEventListener('click', e => nextPrev(-1, e))
$('#nextBtn').addEventListener('click', e => nextPrev(1, e));
[...$$('input')].forEach(input => {
  input.addEventListener('change', ({
      target
    }) =>
    target.classList.add('valid')
  )
})

/*$('.add').addEventListener('click', () => {
  const product = document.createRange().createContextualFragment($('.product').outerHTML)
  // const product = new DOMParser().parseFromString($('.product').outerHTML, 'text/html').body.firstChild
  $('.loading-wrapper').classList.remove('loading-hide')
  $('#nextBtn').disabled = true

  setTimeout(() => {
    $('.loading-wrapper').classList.add('loading-hide')
    $('.products-list').insertBefore(product, $('.products-list').childNodes[2])
    $('#nextBtn').disabled = false
  }, 3000)
});*/

function removeItem({
  parentNode
}) {
  const willRemoved = confirm('Tem certeza que deseja remover este item?')

  if (willRemoved) $('.products-list').removeChild(parentNode.parentNode)
}

const amount = $('.amount')

function removeAmount({
  parentNode
}) {
  const input = parentNode.children[1]
  if (input.value > 1) {
    input.value = input.value - 1
  }
}

function addAmount({
  parentNode
}) {
  const input = parentNode.children[1]
  input.value = parseInt(input.value) + 1
}

* {
  box-sizing: border-box;
  outline: 0;
}

button:hover,
button:active,
button:focus {
  outline: 0;
}

h1 {
  margin: 0;
  padding: 40px 0 20px;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: #5b5b5b;
  color: #323232;
  margin: 0;
  padding: 0;
}

.App {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.App:before {
  content: '';
  background-image: url('https://www.jotform.com/uploads/anil/form_files/bryan-minear-315773.901.jpg');
  filter: sepia(65%) brightness(.5);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-size: cover;
  position: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;
  z-index: 0;
}

#regForm {
  width: 57%;
  min-width: 250px;
  border-radius: 6px;
  overflow: hidden;
  z-index: 1;
}

.tabs-wrapper {
  display: flex;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

h1 {
  text-align: center;
  background-color: #fff;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  background-color: transparent;
  border: 1px solid #aaaaaa;
  border-radius: 3px;
  transition: border .2s linear;
  z-index: 1;
}

input:focus,
input:active {
  border-color: #4a85ef;
  box-shadow: 0 0 0 2px rgba(72, 130, 239, .3);
}

input.valid {
  border-color: #00af00;
  box-shadow: 0 0 0 2px rgba(0, 175, 0, .3);
}


/* Mark input boxes that gets an error on validation: */

input.invalid {
  border-color: #e34343;
  box-shadow: 0 0 0 2px rgba(227, 68, 68, .3);
}


/* Hide all steps by default: */

.tab {
  display: flex;
  flex-direction: column;
  padding: 40px 0;
  background-color: #fff;
  width: 100%;
  transition: all 0.6s;
  opacity: 1;
}

.tab>* {
  padding: 0 40px;
}

.long-tab {
  overflow-y: auto;
  /* margin-bottom: 25px; */
  max-height: 85vh;
}

.tab p {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.tab p input+input {
  margin-left: 2%;
}

.hidden {
  position: absolute;
  transform: translateX(100%);
  opacity: 0;
}

.with-dalay {
  transition-delay: 0.5s;
}

.buttons-wrapper {
  display: flex;
  width: 100%;
  background-color: #fff;
}

button {
  background-color: #ffff00;
  color: #000;
  border: none;
  padding: 15px 40px;
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
  transition: all .2s linear;
}

button:hover {
  background-color: #d9d900;
  color: white;
}

button:disabled {
  background-color: #dfdf00;
}

#prevBtn {
  text-align: left;
}

#nextBtn {
  text-align: right;
}

.steps-wrapper {
  text-align: center;
  color: #d2d2d2;
  z-index: 1;
  font-size: 16px;
  background-color: rgba(0, 0, 0, .35);
  padding: 10px;
  border-radius: 4px;
  min-width: 130px;
  letter-spacing: 1px;
}

.steps-wrapper span {
  color: #fff;
  opacity: 0.7;
}

.steps-wrapper span:first-child {
  opacity: 1;
}

.question-wrapper {
  margin: 10px 0 0;
}

.question-wrapper .question {
  font-size: 15px;
}

.question-wrapper .required {
  color: #e34343;
  font-size: 1em;
}

.question-description {
  font-size: 12px;
  color: #7c7c7c;
}

.warning {
  font-size: 10pt;
}

.warning p {
  line-height: 1.5em;
}

.warning ol {
  padding: 0 40px 0 53px;
}

.warning ol li {
  text-align: justify;
  line-height: 1.5em;
}

.warning ol li:first-child {
  margin-bottom: 25px;
}

.warning ol li span {
  text-decoration: underline;
}

.flex-container input.short-input {
  width: 30%;
}

.add {
  font-size: 26px;
  width: 35px;
  height: 35px;
  text-align: center;
  border: 1px solid gainsboro;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-left: 10px;
  cursor: pointer;
  transition: all .2s ease;
}

.add:hover {
  background-color: gainsboro;
}

.place-holder {
  position: absolute;
  font-size: 14px;
  left: 52px;
  color: #9f9f9f;
  transition: all .5s ease;
  top: 14px;
}

input[name=aLink]:focus+span.place-holder {
  top: 50px;
  font-size: 12px;
}

input[name="aLink"]:not(:placeholder-shown)+span.place-holder {
  top: 50px;
  font-size: 12px;
}

#cart {
  padding: 1.5em 0;
}

div.cart-header {
  display: flex;
  padding-bottom: 10px;
  border-bottom: 2px solid gainsboro;
  flex-wrap: wrap;
}

.cart-header span:first-child {
  flex: 1 300px;
}

.cart-header span:first-child span {
  color: #16b451;
  font-size: 1.1em;
}

.cart-header span:last-child {
  font-size: small;
  text-align: justify;
  font-style: italic;
  flex: 1 55%;
}

.products-list {
  overflow-y: auto;
  max-height: 45vh;
  border-bottom: 1px solid gainsboro;
}

.product {
  width: 100%;
  overflow-y: hidden;
  padding: 20px 0;
  border-bottom: 1px solid #e6e9ed;
  display: block;
  transition: 0.3s;
}

.product:last-child {
  border-bottom: none;
}

.product .product-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product .remove {
  color: tomato;
  cursor: pointer;
  font-size: 26px;
  margin-left: 10px;
  transition: color .2s linear;
}

.product .remove:hover {
  color: #ce2000;
}

.products-list .description {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}

.products-list img {
  width: 100px;
}

.products-list .description>div:last-child {
  display: flex;
  flex-direction: column;
}

.description>div:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.description .remove:hover {
  color: tomato;
}

.products-list .description .dolar-price {
  font-weight: bold;
}

.products-list .description .from-amazon {
  color: gray;
  text-decoration: line-through;
}

.products-list .description .from-glin {
  color: #16b451;
  font-size: 1.2em;
  font-weight: bold;
}

.products-list .description .economy {
  color: #16b451;
}

.products-list .description .shippment {
  margin-top: 15px;
}

.products-list .description .amount-wrapper {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

.products-list .description .amount-controls {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-left: 10px;
  align-items: center;
  border: 1px solid #ccc;
}

.products-list .description .controls {
  padding: 0 10px;
  cursor: pointer;
}

.products-list .description .amount {
  width: 45px;
  font-size: 13px;
  -moz-appearance: textfield;
  border-radius: 0;
  text-align: center;
  border: none;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 5px 10px;
}

.products-list .description .arrives {
  font-weight: bold;
}

.loading {
  margin: 30px auto 0;
  border: 5px solid #d9d9d9;
  border-radius: 50%;
  border-top: 5px solid yellow;
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
}

.loading-wrapper p {
  color: #959595;
}

.loading-hide {
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 575.98px) {
  .tab>* {
    padding: 0 20px;
  }
  .place-holder {
    top: 10px;
    left: 32px;
  }
  input[name=aLink]:focus+span.place-holder {
    top: 45px;
  }
  input[name=aLink]:not(:placeholder-shown)+span.place-holder {
    top: 45px;
  }
  button {
    font-size: 14px;
  }
  .flex-container input {
    font-size: 12px;
  }
}

@media (max-width: 855px) {
  #regForm {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-color: #fff;
  }
  .products-list {
    max-height: 75vh;
    height: 55vh;
  }
  .steps-wrapper {
    width: 100%;
    margin-top: 0;
    background-color: #5b5b5b;
  }
}

@media (max-width: 487px) {
  input {
    font-size: 12px;
  }
}

@media (max-width: 414px) {
  #regForm {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-color: #fff;
  }
  .tab p:not(.flex-container) {
    flex-wrap: wrap;
  }
  .tab p:not(.flex-container) input[name=email] {
    margin: 10px 0;
  }
  .loading-wrapper p {
    font-size: 15px
  }
  .steps-wrapper {
    width: 100%;
    margin-top: 0;
    background-color: #5b5b5b;
  }
}

<div class="App">
  <form id="regForm">
    <div class="tabs-wrapper">
      <div class="tab">
        <label class="question-wrapper">
						<span class="question">Como você gostaria de ser chamado(a)?</span>
						<span class="required"> *</span>
					</label>
        <span class="question-description">Assim fica mais legal conversarmos :)</span>
        <p><input placeholder="Seu nome" name="fname"></p>
      </div>
      <div class="tab hidden with-dalay">
        <label class="question-wrapper">
						<span class="question">Legal, {fulano}. E qual o seu e-mail para contato?</span>
						<span class="required"> *</span>
					</label>
        <span class="question-description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, officia.</span>
        <p>
          <input placeholder="e-mail" name="email">
          <input placeholder="confirmar e-mail" name="email">
        </p>
      </div>

      <div class="tab hidden with-dalay">
        <label class="question-wrapper">
						<span class="question">Lorem ipsum dolor sit amet.</span>
					</label><span class="question-description">
						Lorem ipsum dolor sit.
					</span>
        <p><input placeholder="lorem ipsum" name="cupomCode"></p>
      </div>

    </div>
    <div class="buttons-wrapper">
      <button type="button" class="btn" id="prevBtn">voltar</button>
      <button type="submit" class="btn" id="nextBtn">próximo</button>
    </div>
  </form>
</div>

关于javascript - 水平步进断表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57720183/