javascript - 我想知道是否有一种方法可以保持按下/聚焦状态，您将输入框留给下一个

问题描述

我正在制作一个表格，客户希望输入框在单击后更改，并且客户希望该更改在填写后保持不变，并且他们已移至下一个输入框。有没有办法做到这一点？最好只使用 HTML 和 CSS，而不是合并任何 JS。如果合并 JS 是绝对必要的，我不会介意，我们绝对可以这样做。

如有必要，我可以附上代码。我只是想知道一旦你进入无状态，是否有办法维持状态。

图 1 是表格看起来是空的。图 2 是填写表格时的外观，以及客户希望输入框在您将输入框留到下一个后的外观。图 3 是您将输入框留到下一个时的样子。

这是代码：

<!DOCTYPE html><!--  This site was created in Webflow. http://www.webflow.com  -->
<!--  Last Published: Wed Oct 13 2021 17:42:31 GMT+0000 (Coordinated Universal Time)  -->
<html data-wf-page="61660acbd4da295dda70c6e3" data-wf-site="61660acbd4da29651970c6e2">
<head>
  <meta charset="utf-8">
  <title>CCEC Tool Enrollment</title>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/ccec-tool-enrollment.webflow.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
  <script type="text/javascript">WebFont.load({  google: {    families: ["Michroma:regular","Roboto:100,300,regular,500,700,900"]  }});</script>
  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
  <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body class="body">
  <div class="wf-section">
    <div class="w-container">
      <h1 class="heading">CCEC NEW TOOL ENROLLMENT</h1>
      <div class="w-row">
        <div class="w-col w-col-6">
          <div class="w-form">
            <form id="email-form" name="email-form" data-name="Email Form" method="get"><label for="name" class="field-label">TOOL NAME</label><input type="text" class="textfield w-input" maxlength="256" name="name" data-name="Name" placeholder="" id="name"></form>
            <div class="w-form-done">
              <div>Thank you! Your submission has been received!</div>
            </div>
            <div class="w-form-fail">
              <div>Oops! Something went wrong while submitting the form.</div>
            </div>
          </div>
        </div>
        <div class="w-col w-col-6">
          <div class="w-form">
            <form id="email-form-2" name="email-form-2" data-name="Email Form 2"><label for="name" class="field-label-3">TOOL DESCRIPTION</label><input type="text" class="textfield w-input" maxlength="256" name="name-2" data-name="Name 2" placeholder="" id="name-2"></form>
            <div class="w-form-done">
              <div>Thank you! Your submission has been received!</div>
            </div>
            <div class="w-form-fail">
              <div>Oops! Something went wrong while submitting the form.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=61660acbd4da29651970c6e2" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
  <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>

.body {
  border-top: 1px solid #2b2b2b;
  background-color: #2b2b2b;
  color: #fff;
}

.form-block {
  width: 1100px;
  margin-top: 198px;
  margin-left: 122px;
}

.text-field {
  border: 1px none #000;
  opacity: 1;
}

.text-field-2 {
  border-style: none none solid solid;
  border-width: 1px 1px 2px;
  border-color: #000 #000 #fff;
  background-color: #2b2b2b;
  background-clip: border-box;
  -webkit-text-fill-color: inherit;
}

.heading {
  font-family: Michroma, sans-serif;
  font-size: 30px;
  font-weight: 400;
  text-align: center;
}

.field-label {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.field-label-2 {
  font-weight: 400;
}

.field-label-3 {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.textfield {
  border-style: none none solid;
  border-width: 1px;
  border-color: #000 #000 #fff;
  background-color: #2b2b2b;
  font-family: Roboto, sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
}

.textfield:active {
  border-style: none;
  background-color: #a6a8ab;
  color: #000;
  font-weight: 500;
  background-clip: border-box;
  -webkit-text-fill-color: inherit;
}

.textfield:focus {
  border-style: none;
  border-color: #000 #000 #fff;
  background-color: #a6a8ab;
  color: #000;
  font-weight: 500;
  -o-object-fit: fill;
  object-fit: fill;
}

.text-field-4 {
  border-style: none none solid;
  border-width: 1px;
  border-color: #000 #000 #fff;
  background-color: #2b2b2b;
}

.texty:focus {
  background-color: #000;
  color: #fff;
}

.contact-form {
  padding-top: 100px;
  padding-bottom: 100px;
}

.contact-form-grid {
  display: -ms-grid;
  display: grid;
  margin-top: 40px;
  grid-auto-columns: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

@media screen and (max-width: 767px) {
  .contact-form {
    padding: 40px 20px;
  }

}

标签： javascripthtmlcss

javascript - 我想知道是否有一种方法可以保持按下/聚焦状态，您将输入框留给下一个

问题描述

解决方案

推荐阅读