如何禁用按钮和显示输入标题
如何禁用按钮和显示输入标题
提问于 2020-12-28 16:18:24
大家好，我有以下代码：my code
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
companyNameField.addEventListener('input', validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", '[2-9]\\d{3}');
companyNameField.setAttribute("title", "wrong");
}
}<form action="" onchange="validate()">
<input type="text" id="FormField_6_input" name="CompanyName" />
<button id="ContinueButton_6">Continue</button>
</form>
使用我的函数，我检查我的输入文本是否满足我的正则表达式。如果没有，那么我关闭了我的按钮。
在禁用的情况下，我还想将"title“属性设置为我的输入，以显示消息。
使用控制台日志，我可以看到模式和标题被成功地添加到我的输入中，但是当我开始写一些错误的东西时，只有我的按钮被禁用，标题没有显示错误消息。
我怎么才能修复它呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-12-28 17:49:45
实际上，title属性只有在鼠标悬停在标签上时才能显示，所以不适合在输入中添加title。也许它可以在下一段代码中工作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" onchange="validate()">
<input type="text" id="FormField_6_input" name="CompanyName" />
<button id="ContinueButton_6">Continue</button>
<span id="wrong_text" style="display:none">wrong</span>
</form>
<script>
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
let wrongText = document.getElementById('wrong_text');
companyNameField.addEventListener('input', validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
wrongText.style.display = "inline";
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", '[2-9]\\d{3}');
companyNameField.setAttribute("title", "wrong");
wrongText.style.display = "none";
}
}
</script>
</body>
</html>Stack Overflow用户
发布于 2020-12-28 16:31:20
看看上面的代码片段，我已经试着解决了你的问题。如果有效，请让我知道
let companyNameField = document.getElementById("FormField_6_input");
let button = document.getElementById("ContinueButton_6");
companyNameField.addEventListener("input", validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", "[2-9]\\d{3}");
companyNameField.setAttribute("title", "wrong");
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<form action="">
<input
type="text"
id="FormField_6_input"
name="CompanyName"
onchange="validate()"
/>
<button id="ContinueButton_6" disabled>Continue</button>
</form>
</body>
</html>
Stack Overflow用户
发布于 2020-12-28 16:40:07
除了使用正则表达式之外，您还可以使用parseInt()；和isNaN()；来只允许数字输入。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65474679
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号