顯示隱藏的輸入字段與自定義文本

-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

顯示隱藏的輸入字段與自定義文本

回答

相關問題