javascript - 将表单锁定在html css中后更改边框
问题描述
我正在用 Html、CSS 和 jQuery 创建一个表单。在这里,当我单击“锁定”按钮时,我可以禁用所有字段行为,但不幸的是,我无法隐藏边框。意味着,如果有一个值,它不应该显示边框,但是在悬停时,它应该显示悬停行为。如果字段中没有值,它应该只显示边框底部和像往常一样的悬停行为。你能检查我的小提琴吗,这将有助于更好地理解。
$("button").click(function() {
alert("The Button was clicked.");
$('#selectBox').css('pointer-events', 'none');
$(".userInput").prop("disabled", true);
});
p {
color: #505050 !important;
margin-top: 7px;
font-size: 15px !important;
font-family: Segoe\000020UI, Tahoma, Arial;
font-weight: 600 !important;
}
.heading {
background-color: #F3F3F3;
margin-top: 0px;
width: auto;
padding-left: 15px;
font-weight: 600 !important;
border-top: 1px solid #d6d6d6;
border-left: 1px solid #d6d6d6;
border-right: 1px solid #d6d6d6;
height: 40px;
}
.contentBody {
font-family: Segoe\000020UI, Tahoma, Arial;
width: 100%;
}
.tab-container {
border: 1px solid #d6d6d6;
margin-left: 0px;
margin-top: 0px;
width: auto;
height: auto;
padding: 1px;
background-color: #FFFFFF;
}
.tab-navigation {
margin-bottom: 15px;
margin-left: 15px;
margin-top: 10px;
}
.tab-content {
font-family: Segoe\000020UI, Tahoma, Arial;
margin-left: 10px;
margin-bottom: 15px;
width: 96.5%;
height: auto;
color: black;
font-size: 14px;
text-align: left;
line-height: 30px;
padding: 20px;
}
.contentLabel {
color: #505050 !important;
font-family: Segoe\000020UI, Tahoma, Arial;
font-size: 14px;
font-style: normal;
text-shadow: 1px 1px 0px #fff;
margin-left: 1%;
}
#selectBox {
width: 300px;
color: #505050 !important;
font-family: Segoe\000020UI, Tahoma, Arial;
font-size: 15px;
margin-left: 7.4%;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
}
.label {
color: #505050 !important;
display: inline-block;
width: 280px;
text-align: left;
font-family: Segoe\000020UI, Tahoma, Arial;
font-size: 14px;
}
.userInput {
color: #505050 !important;
background-color: rgb(255, 255, 255) !important;
border: 0px;
border-bottom: 0.7px dashed #505050;
font-family: Segoe UI, Tahoma, Arial;
font-size: 14px;
display: inline-block;
width: 300px;
text-align: left;
border-radius: 1px;
outline: 0;
text-indent: 2px;
}
.userInput:hover,
.userInput:focus {
background-color: rgb(255, 255, 255) !important;
color: rgb(0, 0, 0);
font-family: Segoe UI, Tahoma, Arial;
margin-top: 3px;
margin-left: 0px;
border: 1px solid rgb(204, 204, 204);
font-size: 14px;
cursor: text;
width: 300px;
height: 20px !important;
padding-left: 3px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
text-align: left;
}
.userInput:focus:valid {
border: 1px solid rgb(204, 204, 204);
}
.userInput:valid {
border: 0px solid rgb(204, 204, 204);
}
.spaning {
margin-left: -317px;
}
.spaning:before {
content: '$';
color: red;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
transition: color 0.5s;
}
.dollarReq {
border-bottom: 0.7px dashed #505050;
/*looks before entering anything in field*/
}
.dollarReq:focus {
border: 1px solid rgb(204, 204, 204);
}
.dollarReq:focus+.spaning:before {
content: '$';
color: orange;
}
.dollarReq:focus:valid {
border: 1px solid rgb(204, 204, 204);
}
.dollarReq:focus:valid+.spaning:before {
content: '$';
color: yellow;
}
.dollarReq:valid {
border: 0px solid rgb(204, 204, 204);
}
.dollarReq:valid+.spaning:before {
content: '$';
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentBody" id="content_wrapper">
<div class="heading">
<p>Heading</p>
</div>
<div class="tab-container">
<div class="tab-navigation">
<span class="contentLabel" id="contentType">Property Finance type : </span>
<select id="selectBox">
<option value="10">Value1</option>
</select>
</div>
<div id="tab-10" class="tab tab-content">
<div>
<label class="label">Value2</label>
<input class="userInput dollarReq" type="text" autocomplete="off" required />
<span class="spaning" for="input"></span>
</div>
<div>
<label class="label">Value3</label>
<input class="userInput dollarReq" type="text" autocomplete="off" required />
<span class="spaning" for="input"></span>
</div>
<div>
<label class="label">Value4</label>
<input class="userInput" type="text" autocomplete="off" required />
</div>
<div>
<label class="label">Value5</label>
<input class="userInput" type="text" autocomplete="off" required />
</div>
</div>
<button type="submit">
Lock
</button>
</div>
</div>
<!--property finance Body-->
解决方案
如果锁定,则在您的表单上添加“表单锁定”。您需要使用 js 来监听输入字段上的 keyup,然后 addClass "notEmpty",然后 css .form-locked .dollarReq.notEmpty {border-bottom:0;}
推荐阅读
- javascript - 如何根据登录用户部门将现代 SharePoint 根站点重定向到不同的页面?
- javascript - Ngx 引导和输入文件元素
- javascript - 冻结 HTML 表格中的多个标题
- node.js - 如何在断开连接的 redhat linux 7.7 系统上构建 atom
- c# - 基于图像的gridview高度变化
- c - __forceinline 生成一个函数符号 - 为什么?如何让它不这样做?
- windows - 是否有 powershell 命令来选择具有特定字符串(时间)的行并且必须打印计数值 Total calls Generated:156?
- python - 我如何将所有循环变量存储在python字典中以在django中使用
- java - 使用 Maven 导出 JavaFX 项目 (IntelliJ IDEA)
- python - 如何在 Windows 10 上的 Sublime Text 3 中重置 python 构建系统?