0
検索ボタンをクリックすると問題が発生します。フォーム送信後にCSS変換を再初期化
私のフォームが最初にロードされ、入力内に単語を入力すると、translateYの一部のおかげで、入力の下に移動するラベルが表示されます。
私のフォームを提出すると、CSSは「キャンセル」されていて元々は入力の中にラベルを戻すことによって元の状態に戻ります。
送信後も、送信前と同じラジオボタンではありません。
「フォームを送信した後でもCSSをそのまま残す」と言う方法はありますか？
のjQuery：
おかげ以下
は、あなたがサブミッション時にフォームの更新を阻止する必要が私の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