我想在文本输入无效时显示工具提示
function check() {
var ok = true;
regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value)) {
ok = false;
}
return ok;
}
<div class="form-group">
<label for="lastName">Last name:</label>
<input type="text" class="form-control" id="lastName" placeholder="Put your last name" name="lastName" />
</div>
我知道如何将 div 中的文本放在输入下document.getElementById("wronglastnamediv").innerHTML = "Put valid last name"
但我不知道当这些文本区域无效时如何在这些文本区域上放置工具提示。
您可以像这样为输入字段添加工具提示。使用setAttribute('title', 'some tooltip')设置工具提示和removeAttribute('title')从输入字段中删除工具提示。
我已将输入事件侦听器添加到输入字段，每次键入字符时都会对输入值进行验证，并根据验证结果添加或删除工具提示。
如果您仅输入一个字符并将鼠标悬停在输入字段上，您应该会看到工具提示。如果您键入第二个字符，它就会消失（请注意，您需要将鼠标光标移到输入字段之外，然后再返回才能实际看到工具提示）。
function check() {
var ok = true;
const regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value)) {
ok = false;
}
return ok;
}
const inp = document.querySelector('input');
inp.addEventListener('input', event => {
if (!check(inp.value)) {
inp.setAttribute('title', 'incorrect value');
} else {
inp.removeAttribute('title');
}
});
<div class="form-group">
<label for ="lastName">Last name:</label>
<input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
</div>
如果您需要更复杂和更“可见”的东西，那么您可以将 css 与数据属性结合使用。逻辑与前面的代码相同。根据验证结果，您可以将数据属性添加到输入字段或将其删除。
function check() {
var ok = true;
const regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value)) {
ok = false;
}
return ok;
}
const inp = document.querySelector('input');
inp.addEventListener('input', event => {
if (!check(inp.value)) {
inp.parentElement.dataset.tip = 'incorrect input value';
} else {
delete inp.parentElement.dataset.tip;
}
});
[data-tip] {
position:relative;
}
[data-tip]:before {
content:'';
display:none;
content:'';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1a1a1a;
position:absolute;
top:30px;
left:35px;
z-index:8;
font-size:0;
line-height:0;
width:0;
height:0;
}
[data-tip]:after {
display:none;
content:attr(data-tip);
position:absolute;
top:35px;
left:0px;
padding:5px 8px;
background:#1a1a1a;
color:#fff;
z-index:9;
font-size: 0.75em;
height:18px;
line-height:18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space:nowrap;
word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
display:block;
}
<div class="form-group" >
<label for ="lastName">Last name:</label>
<input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
</div>
要在表单提交上添加工具提示而不是悬停，您可以使用submit-event listener并执行与之前相同的代码，但您需要添加event.preventDefault();以及防止验证失败时提交表单（并且您需要稍微更改 css）。
现在，当您单击“提交”按钮时，如果输入值不正确，您应该会看到工具提示。
function check() {
var ok = true;
const regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value)) {
ok = false;
}
return ok;
}
const inp = document.querySelector('input');
const form = document.querySelector('form');
form.addEventListener('submit', event => {
if (!check(inp.value)) {
event.preventDefault();
inp.parentElement.dataset.tip = 'incorrect input value';
} else {
delete inp.parentElement.dataset.tip;
}
});
[data-tip] {
position:relative;
}
[data-tip]:before {
content:'';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1a1a1a;
position:absolute;
top:30px;
left:35px;
z-index:8;
font-size:0;
line-height:0;
width:0;
height:0;
}
[data-tip]:after {
content:attr(data-tip);
position:absolute;
top:35px;
left:0px;
padding:5px 8px;
background:#1a1a1a;
color:#fff;
z-index:9;
font-size: 0.75em;
height:18px;
line-height:18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space:nowrap;
word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
display:block;
}
<form>
<div class="form-group" >
<label for ="lastName">Last name:</label>
<input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
</div>
<input type="submit" value="submit" />
</form>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
