表单提交后重新初始化CSS转换

Question

当我点击我的搜索按钮时，我遇到了一个问题。

当我的表单首次加载并在输入中输入一个单词时，我们可以看到它内部的标签在输入的底部移动，这要归功于一些translateY。

但是当我提交表单时，就像css被“取消”并通过将标签放回输入中而回到原来的状态。

同样在提交之后，它与正在检查的单选按钮不同于提交之前。

有没有办法说“即使在提交表格后仍然保留css”？

由于

下面是我的html / css和JS

$(document).ready(
  function() {
    debugger;

    $('.form').find('input:not([type="radio"])').on('keyup blur focus',
      function(e) {
        console.log('this is my script');
        var $this = $(this),
          label = $this.prev('label');

        if (e.type === 'keyup') {
          if ($this.val() === '') {
            label.removeClass('active highlight');
          } else {
            label.addClass('active highlight');
          }
        } else if (e.type === 'blur') {
          if ($this.val() === '') {
            label.removeClass('active highlight');
          } else {
            label.removeClass('highlight');
          }
        } else if (e.type === 'focus') {

          if ($this.val() === '') {
            label.removeClass('highlight');
          } else if ($this.val() !== '') {
            label.addClass('highlight');
          }
        }

      });
  }
);

*,
   *:before,
   *:after {
     box-sizing: border-box;
   }
   html {
     overflow-y: scroll;
   }
   body {
     background: #c1bdba;
     font-family: 'Titillium Web', sans-serif;
   }
   .form {
     background: rgba(19, 35, 47, 0.9);
     padding: 40px;
     max-width: 70%;
     margin: 40px auto;
     border-radius: 4px;
     box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
   }
   h1 {
     text-align: center;
     color: #ffffff;
     font-weight: 300;
     margin: 0 0 40px;
   }
   label {
     position: absolute;
     -webkit-transform: translateY(6px);
     transform: translateY(6px);
     left: 13px;
     color: rgba(255, 255, 255, 0.5);
     -webkit-transition: all 0.25s ease;
     transition: all 0.25s ease;
     -webkit-backface-visibility: hidden;
     pointer-events: none;
     font-size: 18px;
   }
   label .req {
     margin: 2px;
     color: #57b7ff;
   }
   label.active {
     transform: translateY(40px);
     animation: forwards;
     left: 2px;
     font-size: 14px;
   }
   label.active .req {
     opacity: 0;
   }
   label.highlight {
     color: #ffffff;
   }
   input:not([type=radio]),
   textarea {
     font-size: 22px;
     display: block;
     width: 100%;
     height: 100%;
     padding: 5px 10px;
     background: none;
     background-image: none;
     border: 1px solid #a0b3b0;
     color: #ffffff;
     border-radius: 0;
     -webkit-transition: border-color .25s ease, box-shadow .25s ease;
     transition: border-color .25s ease, box-shadow .25s ease;
   }
   input:focus,
   textarea:focus {
     outline: 0;
     border-color: #ede741;
   }
   textarea {
     border: 2px solid #a0b3b0;
     resize: vertical;
   }
   .field-wrap {
     position: relative;
     margin-bottom: 10px;
   }
   .top-row:after {
     content: "";
     display: table;
     clear: both;
   }
   .top-row > div {
     float: left;
     width: 23%;
     margin-right: 2%;
   }
   .top-row > div:last-child {
     margin: 0;
   }
   .button {
     border: 0;
     outline: none;
     border-radius: 0;
     padding: 15px 0;
     margin-bottom: 10px;
     font-size: 2rem;
     font-weight: 300;
     letter-spacing: .1em;
     background: #57b7ff;
     color: #ffffff;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
     -webkit-appearance: none;
   }
   .button:hover,
   .button:focus {
     background: #179b77;
   }
   .button-block {
     display: block;
     width: 30%;
   }
   .forgot {
     margin-top: -20px;
     text-align: right;
   }
   fieldset {
     margin-bottom: 30px;
     border: 0.5px solid #57b7ff;
   }
   legend {
     font-size: 1.5rem;
     color: #57b7ff;
   }
   /*.searchtype{
      margin-left: 8px;
      margin-top: 20px;
    }*/
   input[type=radio] {
     margin-top: 10px;
     margin-right: -5px;
     padding: 0px;
   }
   label.radio {
     cursor: pointer;
     overflow: visible;
     position: relative;
     margin-bottom: 10px;
     margin-right: 25px;
   }
   label.radio:before {
     background: #57b7ff;
     content: '';
     position: absolute;
     top: 0px;
     left: -30px;
     width: 20px;
     height: 20px;
     border-radius: 100%;
   }
   label.radio:after {
     opacity: 0;
     content: '';
     position: absolute;
     width: 0.5em;
     height: 0.25em;
     background: transparent;
     top: 7.0px;
     left: -25px;
     border: 3px solid ghostwhite;
     border-top: none;
     border-right: none;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     transform: rotate(-45deg);
   }
   input[type=radio]:checked + label:after {
     opacity: 1;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form">
  <div class="tab-content">
    <div id="wrapperAll">
      <h1>Wrapper Testing Tool</h1>
      <form id="wrapperForm" method="POST" runat="server" action="WrapperTestingTool.aspx">

        <fieldset>
          <legend>Connection Info</legend>
          <div class="top-row">
            <div class="field-wrap">
              <label>
                Organization ID<span class="req">*</span>
              </label>
              <input id="inputOrgId" type="text" required autocomplete="off" runat="server" />
            </div>

            <div class="field-wrap">
              <label>
                User Name<span class="req">*</span>
              </label>
              <input id="inputUserName" type="text" required autocomplete="off" runat="server" />
            </div>

            <div class="field-wrap">
              <label>
                Password<span class="req">*</span>
              </label>
              <input id="inputPassword" type="password" required autocomplete="off" runat="server" />
            </div>

            <div class="field-wrap">
              <label>
                Source<span class="req">*</span>
              </label>
              <input id="inputSource" type="text" required autocomplete="off" runat="server" />
            </div>
          </div>

        </fieldset>

        <fieldset>
          <legend>Client Details</legend>
          <div class="top-row">
            <div class="field-wrap">
              <label>
                Name<span class="req">*</span>
              </label>
              <input id="inputClientName" type="text" required autocomplete="off" runat="server" />
            </div>

            <div class="field-wrap">
              <label>
                Client ID<span class="req">*</span>
              </label>
              <input id="inputClientId" type="text" required autocomplete="off" runat="server" />
            </div>


            <input type="radio" value="None" id="radioIndividual" name="account" checked runat="server" />
            <label for="radioOne" class="radio">Individual</label>
            <input type="radio" value="None" id="radioOrg" name="account" runat="server" />
            <label for="radioTwo" class="radio">Organization</label>
            <input type="radio" value="None" id="radioElement" name="account" runat="server" />
            <label for="radioThree" class="radio">Specific Element</label>
        </fieldset>

        <button type="submit" class="button button-block" />Search</button>

        <div>
          <textarea rows="6" cols="150" id="searchResults">
            <%=t his.ResultLookup %>
          </textarea>
        </div>

      </form>

      </div>



    </div>
    <!-- tab-content -->

  </div>
  <!-- /form -->

Answer 1

您需要在提交时阻止表单刷新：

Jquery的：

$("#wrapperForm").on("submit", function(e) {
    e.preventDefault();
});

JavaScript的：

document.getElementById("wrapperForm").onsubmit = function(e) {
    e.preventDefault();
}

Answer 2

我不知道asp.net中是怎么回事（我从未使用过它），但如果你不使用ajax，如果你想保留所有内容，那么你必须重用数据，您已通过表单发送。这意味着您必须检查是否已经通过相同的表单发送了某些内容。您的页面重新加载，这就是您的表单刷新的原因。在php中，您可以通过$_POST，$_GET或$_REQUEST数组获取该数据。我希望这有助于（在某种程度上）