gpt4 book ai didi

javascript - 从另一个元素的行为更改按钮的状态

转载 作者:行者123 更新时间:2023-11-28 08:36:16 25 4
gpt4 key购买 nike

我正在编写的代码是在 ASP.net Web Forms 上,我在这个专业领域还很陌生,但我简化了它以在纯 HTML 中运行,这样您就可以帮助我从 jsfiddle.net 确定我的代码范围。我需要在这段代码中执行一些任务,其中一些短代码(所以我相信)阻止我完成它。我在下面写下我请求开发人员帮助做的事情:

  • “保存”按钮应默认禁用并自行重新启用每当其中一个输入发生变化时(填充了一些信息)。
  • 在它被重新启用以便被点击后,我放了一个
    触发/切换类以执行平滑的 jQuery 代码
    进度填充按钮。我需要 CSS 转换运行一次并且
    完成后将按钮的视觉效果重置为默认值乍一看。

这是<强> FIDDLE .

<head>
<style>
#formProfile {
z-index: 1;
float: left;
left: 10px;
top: 15px;
position: relative;
height: 620px;
width: 500px;
}
#userProfileTab {
position: absolute;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: teal;
color: whitesmoke;
font-size: 36px;
font-weight: 900;
font-family: Calibri;
text-align: center;
line-height: 170%;
height: 10%;
width: 40%;
top: 0;
left: 30%;
}
#userProfileContainer {
position: absolute;
border: 3px solid teal;
border-radius: 10px;
height: 89%;
width: 90%;
top: 10%;
left: 5%;
overflow: auto;
}
#profileLabels {
position: absolute;
top: 3%;
left: 0;
/*border: 2px outset teal;
border-radius: 10px;*/
height: 490px;
width: 44%;
}
#profileFields {
position: absolute;
/*border: 2px outset teal;
border-radius: 10px;*/
height: 490px;
width: 55%;
top: 3%;
left: 44%;
}
.labels {
position: absolute;
border: none;
border-bottom: 1px solid silver;
height: 38px;
width: 90%;
line-height: 150%;
color: #848484;
font-family: Calibri;
font-size: 24px;
text-align: right;
left: 5%;
}
.labels:after {
content:'';
position: relative;
left: 3%;
border-right: 1px solid silver;
}
.textBox {
position: absolute;
border: 1px dotted black;
display: block;
background-color: white;
box-sizing: border-box;
color: black;
height: 34px;
width: 95%;
left: 2%;
margin-top: 2px;
margin-bottom: 2px;
text-align: center;
font-family: Calibri;
font-style: italic;
font-size: 16px;
text-decoration: none;
outline: 0;
opacity: 0.75;
-moz-transition: all .3s;
-o-transition: all .3s;
-webkit-transition: all .3s;
transition: all .3s;
}
.textBox:hover {
opacity: 1;
border: none;
background: whitesmoke;
-webkit-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.textBox:focus {
border-radius: 10px;
border-style: solid;
border-width: 2px;
background-color: lightskyblue;
color: white;
font-size: 20px;
opacity: 1;
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75) !important;
-moz-box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75) !important;
box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75) !important;
}
.btnSave {
position: absolute;
height: 40px;
width: 100px;
background-color: white;
text-align: center;
font-family: Calibri;
font-size: 20px;
border: 2px solid teal;
border-radius: 10px;
outline: none;
top: 558px;
left: 330px;
}
.buttonFull {
border: 2px solid teal;
border-radius: 10px;
background: white;
position: absolute;
height: 40px;
width: 100px;
box-shadow: 0 2px 0 silver;
cursor: pointer;
overflow:hidden;
transition: all .1s linear;
}
.buttonFull:active {
box-shadow: none;
transform: translateY(2px);
}
#saveButtonFull {
top: 480px;
left: 330px;
}
#resetButtonFull {
top: 480px;
left: 200px;
}
.save, .reset {
position:absolute;
font-family: Calibri;
font-size: 20px;
font-weight: 900;
text-align: center;
z-index: 10;
-webkit-transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out;
-o-transition: color 1s ease-in-out;
transition: color 1s ease-in-out;
}
.save {
top:7px;
left:30px;
}
.reset {
top:7px;
left:27px;
}
#savedTick, #resetTick {
display: none;
position: absolute;
top: 7px;
left: 50px;
color: white;
font-family: Calibri;
font-size: 20px;
text-align: center;
z-index: 20;
text-shadow: #99FF66 0px 0px 10px;
}
.inner {
background:#1d9650;
/*border-radius: 7px;*/
position: absolute;
top:0;
left:0;
text-align: center;
width:0;
height: 100%;
-webkit-transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
-moz-transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
-o-transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
/* custom */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
-moz-transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
-o-transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
/* custom */
}
.progressBar {
width: 100px !important;
}
.textColorize {
left: 26px;
color: white;
}
.notransition {
-webkit-transition-delay: 1s;
/* Safari */
transition-delay: 1s;
width: 0;
}
</style>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>

$(document).ready(function () {
//var $heightBody = $(window).height() / 2;
//var $heightParent = document.getElementById("formLogIn").clientHeight / 2;
var $widthBody = $(window).width() / 2;
var $widthParent = document.getElementById("formProfile").clientWidth / 2;
//var $mrgTop = $heightBody - $heightParent;
var $mrgLeft = $widthBody - $widthParent;

$("body").css("margin-left", $mrgLeft);

$("#saveButtonFull").on("click", function () {
//$(this).off("click");
$(".inner").toggleClass("progressBar");
$(".save").html("Saved").toggleClass('textColorize');
//$(".inner").addClass("notransition").removeClass("notransition");
//$(".save").toggleClass('textColorize');

});

</script>

</head>

<body>
<form id="formProfile">
<div id="userProfileTab">Profile</div>
<div id="userProfileContainer">
<div id="profileLabels"> <span id="lblFirstName" class="labels" style="border-top: 1px solid silver;">* First Name</span>

<br/>
<br/> <span id="lblSurname" class="labels">* Surname</span>

<br/>
<br/> <span id="lblBirdthay" class="labels">* Birthday</span>

<br/>
<br/> <span id="lblGender" class="labels">* Gender</span>

<br/>
<br/> <span id="lblEmail" class="labels">* E-mail</span>

<br/>
<br/> <span id="lblPhone" class="labels">Phone</span>

<br/>
<br/> <span id="lblCountry" class="labels">Country/State</span>

<br/>
<br/> <span id="lblCity" class="labels">City/Town</span>

<br/>
<br/> <span id="lblAddress1" class="labels">Address 1</span>

<br/>
<br/> <span id="lblAddress2" class="labels">Address 2</span>

<br/>
<br/> <span id="lblZip" class="labels">Zip/Postal Code</span>

<br/>
<br/> <span id="lblSignature" class="labels">Signature</span>

</div>
<div id="profileFields">
<input type="text" id="txtFirstName" class="textBox"</input>
<br/>
<br/>
<input type="text" id="txtSurname" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtBirthday" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtGender" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtEmail" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtPhone" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtCountry" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtCity" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtAddress1" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtAddress2" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtZip" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtSignature" class="textBox"></input>
</div>

<div id="resetButtonFull" class="buttonFull">
<span id="resetTick">&#10004;</span>
<span class="reset">Reset</span>
</div>

<div id="saveButtonFull" class="buttonFull">
<span id="savedTick">&#10004;</span>
<span class="save">Save</span>
<div class="inner"></div>
</div>

</div>
</form>
</body>

最佳答案

对于你的第一个问题:你可以这样做:

var flag = false;
$('.textBox').on('keyup',function(e){
if(this.value)
{
flag = true;
console.log(flag);
}
else
{
flag = false;
console.log(flag);
}
});

在这个标志的基础上,你可以启用/禁用你的保存按钮。由于您正在为“保存”按钮使用 div。您可以将其灰显以将其显示为已禁用。在您的按钮“onClick”事件处理程序中,您可以为这个“标志”设置一个“if”条件。让我知道这是否有帮助,我可以进一步帮助您。

关于javascript - 从另一个元素的行为更改按钮的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28023251/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com