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字段中那样被覆盖。也就是说，点击“姓名”字段后，“姓名”和“＃39;消失，该字段为空白。单击E-MAIL / MESSAGE字段时，文本不会消失，字段也不会消隐。为什么会这样？它是如何修复的？

可以看到实时表格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。

单击字段时表单字段未消隐

1 个答案: