0
當我單擊我的搜索按鈕時，我遇到了問題。表單提交後重新初始化CSS轉換
當我的表單首次加載時，我在輸入內輸入一個單詞，我們可以看到它內部的標籤在輸入的底部移動，這要感謝一些translateY。
但是，當我提交我的表單時，它就像是被「取消」，並回到原來的標籤，將標籤放回到輸入中。
同樣在提交之後，與提交之前不同的單選按鈕被檢查。
有沒有辦法說「離開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 -->
也許你的意思是使用Ajax提交表單？ – mplungjan