是一种常见的前端开发需求,可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
.duplicate {
background-color: red;
}
</style>
<script>
function checkDuplicate() {
var email1 = document.getElementById("email1").value;
var email2 = document.getElementById("email2").value;
if (email1 === email2) {
document.getElementById("email2").classList.add("duplicate");
} else {
document.getElementById("email2").classList.remove("duplicate");
}
}
</script>
</head>
<body>
<label for="email1">Email 1:</label>
<input type="email" id="email1" name="email1" required><br><br>
<label for="email2">Email 2:</label>
<input type="email" id="email2" name="email2" required oninput="checkDuplicate()"><br><br>
<input type="submit" value="Submit">
</body>
</html>
在上述示例中,我们使用了JavaScript来获取输入框的值,并通过比较判断是否重复。如果重复,则给Email2输入框添加名为"duplicate"的CSS类,从而改变其背景色为红色。如果不重复,则移除该CSS类,恢复默认样式。
这种方式可以应用于各种需要判断重复并更改样式的场景,例如注册表单、密码确认等。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅为示例,具体的产品选择应根据实际需求和情况进行评估和选择。
领取专属 10元无门槛券
手把手带您无忧上云