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

-1

我有隐藏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>

来源

2016-04-27 TryllZ

如何调用validate（）？用户在哪里输入什么内容？请在你的问题中发布[mcve]。 – j08691

您无法显示隐藏的输入。将类型更改为'text'并使其不可见，并在需要时显示 –

HTML规范：“[hidden] input元素表示一个值，该值不会被用户检查或操作” –

而是改变风格，你可以改变形式的type属性。

使用JavaScript - 假设你想改变lnspan到text：

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

风格是不一样的type属性。您的<input>中还有两个id属性，您可能需要更改该属性。

来源

2016-04-27 13:48:07 Tico

**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>

来源

2016-04-27 14:37:35

答案看起来很大，但如果你理解它就很简单 –

不工作，面临2个问题，1是该领域的可见性，它显示不到一秒钟，第二个显示的文本，因为我明白文本将在字段可见时显示，再次，该字段显示不到一秒钟并消失，然后文本缩小，但由于字段不可见，文本也消失 – TryllZ

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

回答

相关问题