Question

我将此文本字段隐藏了HTML隐藏代码，现在当用户输入无效输入时，我使用javascript取消隐藏文本字段并显示错误消息，这就是假设发生的情况。

我见过很多像

这样的CSS风格

`style.visibility = 'visible';` and `style.display='block';`

但他们中没有一个能为我工作的是，错误文本显示不到一秒然后消失，任何人都想分享他们的想法。

这是完整的代码以便更好地理解，它仍然无法在Firefox和Edge中运行，而IE和Chrome不会做任何事情，在Firefox中，它只会在每次按下按钮时闪烁一次而且就此而言。

使用Javascript：

</script>
function validate(){
var firstname = document.getElementById("fn").value;

if (firstname == "") {
    document.getElementById("fn").style.visibility = "visible";
    document.getElementById("fn").text = "ERROR";
}
}

function init()
{
    var formData = document.getElementById("enqForm");
    formData.onsubmit = validate;
}

window.onload = init;
</script>


<!DOCTYPE html>
<html lang="en">
<head>
  <script src="scripts.js"></script>
</head>
<body>
  <form id="enqForm">
    <input id="fn" type="text" placeholder="First Name *" />
    <input id="sendbutton" type="submit" value="Enquire" />
</form>
</body>
</html>

Answer 1

您可以更改表单的type属性，而不是更改样式。

使用JavaScript - 假设您要将lnspan更改为text：

document.getElementById('lnspan').type = 'text';

样式与type属性不同。您的id中还有两个<input>属性，您可能想要更改它。

Answer 2

**THAT IS THE ANSWER TO YOUR QUESTION**
<html>
<head>
<script>
function newDoc() {
document.getElementById("hid").type="text";
document.getElementById("hid").value="ERROR";
}
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newDoc()">
<input type="hidden" id="hid" value="">

</body>
</html>
<!--However this makes your error message as text field which is not good.
What you can do is make the Error into embedded into paragraph <p> so the  
 users cannot change it and it also looks more professional    
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc() {
document.getElementById("te").innerHTML="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<p id="te">
</body>
</html>

显示带有自定义文本的隐藏输入字段

2 个答案: