表單字段不進行消隱上點擊在現場

Question

我有一個簡單形式，其是這樣的：

<form method="post" action="#" id="contact-form"> 
        <input id="name" name="name" type="text" value="NAME" onfocus="if (this.value == 'NAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'NAME';}" required/> 
        <input id="email" type="email" name="email" value="E-MAIL" onfocus="if (this.value == 'E-MAIL ADRESS') {this.value = '';}" onblur="if (this.value == '') {this.value = 'E-MAIL ADDRESS';}" required /> 
        <textarea rows="5" cols="60" id="message" name="message" type="text" style="background:none; color: black;font-family: inherit; font-size: 11px; font-weight: 800;" onfocus="if (this.value == 'YOUR MESSAGE') {this.value = '';}" onblur="if (this.value == '') {this.value = 'YOUR MESSAGE';}" required>MESSAGE</textarea> 
        <br> </br> 
        <button class="button-outline defalut send-mail" type="submit" name="submit"><strong>Send</strong> Message</button> 
    </form> 

如所看到的，我提供了一種用於一個值的每個字段。但是，有一個奇怪的問題，E-MAIL和MESSAGE值不會像它們在NAME字段中一樣被覆蓋。也就是說，單擊名稱字段時，「名稱」消失，字段爲空。單擊電子郵件/郵件字段時，文本不會消失，字段也不會消隱。爲什麼會發生？它是如何修復的？

直播形式可以看到here。 HTML是here。所有文件都是here。

Answer 1

if語句不正確。您將值設置爲E-MAIL，但if語句檢查E-MAIL ADRESS（原文如此）。類似的textarea字段。

<form method="post" action="#" id="contact-form"> 
 
    <input id="name" name="name" type="text" value="NAME" onfocus="if (this.value == 'NAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'NAME';}" required/> 
 
    <input id="email" type="email" name="email" value="E-MAIL" onfocus="if (this.value == 'E-MAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'E-MAIL';}" required /> 
 
    <textarea rows="5" cols="60" id="message" name="message" type="text" style="background:none; color: black;font-family: inherit; font-size: 11px; font-weight: 800;" onfocus="if (this.value == 'MESSAGE') {this.value = '';}" onblur="if (this.value == '') {this.value = 'MESSAGE';}" 
 
    required>MESSAGE</textarea> 
 
    <br> 
 
    <button class="button-outline defalut send-mail" type="submit" name="submit"><strong>Send</strong> Message</button> 
 
</form>

這裏有一個working JSFiddle。