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

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

javascript html input

Javascript 显示带有自定义文本的隐藏输入字段,javascript,html,input,textfield,visibility,Javascript,Html,Input,Textfield,Visibility,我用HTML隐藏代码隐藏了这个文本字段，现在当用户输入无效输入时，我使用javascript取消隐藏文本字段并显示错误消息，这就是应该发生的情况我见过很多css样式，比如 `style.visibility = 'visible';` and `style.display='block';` 但是他们没有一个是为我工作发生的是，错误文本显示不到一秒钟，然后消失，任何人都想分享他们的想法这是完整的代码，用于更好地理解，它在firefox和Edge中仍然不起作用，而IE和Chrome则什么都

我用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>


函数验证（）{
var firstname=document.getElementById（“fn”）.value；
如果（firstname==“”）{
document.getElementById（“fn”）.style.visibility=“可见”；
document.getElementById（“fn”）.text=“ERROR”；
}
}
函数init（）
{
var formData=document.getElementById（“enqForm”）；
formData.onsubmit=验证；
}
window.onload=init；

您可以更改表单的

类型

属性，而不是更改样式

使用JavaScript-假设您想将

lnspan

更改为

text

：

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

样式与

类型

属性不同。您的

中还有两个

id

属性，您可能需要更改它们。

**这就是您问题的答案**
**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>

函数newDoc（）{
document.getElementById（“hid”）.type=“text”；
document.getElementById（“hid”）.value=“ERROR”；
}
如何调用validate（）
？用户在哪里输入任何内容？请在你的问题中发布一个。你不能显示隐藏的输入。将类型更改为text
，使其不可见，并在需要TML规范时显示：“[hidden]输入元素表示一个用户不打算检查或操作的值”@j0869:Validate通过表单调用。onSubmit，用户不输入任何字符串，该字段是隐藏的，应该是可见的，以便在另一个字段中显示输入错误。该字段仅显示error@Arnau Lacambra:type被更改为text，然后被设置为display，不起作用。答案看起来很大，但如果您理解它不起作用，则非常简单，面临两个问题，1是字段的可见性，在不到一秒钟的时间内变为可见，2是要显示的文本，据我所知，当字段可见时，文本将显示，同样，字段显示不到一秒钟，然后消失，然后文本shws，但由于字段不可见，文本也会消失