如何防止占位符覆盖 autocomplete="off"？

Question

向文本输入元素添加占位符属性似乎否定了我的 autocomplete="off" 属性。

即它恢复了显示先前条目的烦人的香蕉黄色下拉菜单。 （更糟糕的是，下拉菜单似乎从浏览器打开的与我的页面无关的窗口中输入的内容中获得了一些建议的输入。）

更具体地说：

这个元素没有令人讨厌的小香蕉黄色下拉列表，带有先前的条目。

<input class="textbox" 
       type="text" 
       name="firstname" 
       value="" autocomplete="off">

但是如果我添加占位符属性，香蕉黄色的下拉菜单就会返回。

<input class="textbox" 
       type="text" 
       name="firstname" 
       value="" autocomplete="off" 
       placeholder="Enter First Name">

是否可以使用占位符而不返回烦人的下拉菜单？

我确信带有 onblur、onfocus 和 onkeypress 的 js 代码可以模仿占位符而不会出现烦人的下拉菜单。但我希望有一种更简单的方法。

有什么建议吗？

添加于 10/5/18 -- 回复：下面关于浏览器的问题。今天变得更糟了。

IE 浏览器始终支持所有文本框的 autocomplete="off"。

但是 Chrome 已经变得不一致，如下面添加的 cmets 所示。名字、名字和姓氏以及电子邮件文本框会忽略 autocomplete="off"。但它为这两个中间名兑现了它。而且我看不出任何文本框的编码方式有什么不同。

这是我的表单的完整代码。 [我将标签/输入对放入表格中以排列。 （顺便说一句，似乎已经断开了它们的连接，因为单击标签不会将焦点转移到其输入上。但那是另一天的事了）]

<form id="formNo1" onsubmit="sendMessage(); return false;">
  <table id="formNo1Table">
    <tr>
        **<!—This is a <select> element -->**
    </tr>
    <tr>         **<!-- Chrom autocompletes / IE doesn’t -->**
      <td>
        <label class="label" for="firstname">First Name:</label>
      </td>
      <td>
        <input class="textbox"  type="text" 
               name="firstname" value="" 
               autocomplete="off" >
      </td>
    </tr>
    <tr>         **<!-- Both OK.  No autocomplete-->**
      <td>
        <label class="label" for="middle1st">Middle Name - First:</label>
      </td>
      <td>
        <input class="textbox"  type="text" 
               name="middle1st" value="" 
               autocomplete="off">
       </td>
    </tr>
    <tr>
        **<!—This is a <select> element-->**
    </tr>
    <tr>
      <td>       **<!-- Both OK.  No autocomplete-->**
        <label class="label" for="middle2nd">Second Middle Name - Second</label>
      </td>
      <td>
        <input class="textbox"  type="text" 
               name="middle2nd" value="" 
               autocomplete="off">
      </td>
    </tr>
    <tr>
      <td>         **<!-- Chrome autocompletes / IE doesn’t -->**
        <label class="label" for="lastname">Last Name:</label>
      </td>
      <td>
        <input class="textbox" type="text" 
               name="lastname" value="" 
               autocomplete="off">
      </td>
    </tr>
    <tr>
        <!—This is a <select> element
    </tr>
    <tr>
      <td>            **<!-- Chrome autocompletes / IE doesn’t -->**
        <label class="label" for="lastname2">Second Last Name:</label>
      </td>
      <td>
        <input class="textbox"  type="text" 
               name="lastname2" value="" 
               autocomplete="off">
      </td>
    </tr>
    <tr>
      <!—This is a <select> element
    </tr>
    <tr>
      <td>
        &nbsp;
      </td>
    </tr>
    <tr>
        <!—This is a <select> element
    </tr>
    <tr>
      <td>
       &nbsp;
     </td>
    </tr>
    <tr>
      <td>          **<!-- Chrome autocompletes / IE doesn’t -->**
        <label class="label" for="email">Email:</label>
      </td>
      <td>        <!-- Chrom autocompletes / IE doesn’t -->
        <input id="emailId"  
               class="textboxdim"    type="text"
               name="email"          value=name@dom.ext
               autocomplete="off">
      </td>
    </tr>
    <tr>
      <td>
        &nbsp;
      </td>
    </tr>
    <tr>
        <!—This is a text area element
    </tr>
    <tr>
      <td>
        &nbsp;
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align:center;">
        <input class="label" name="submit button" 
               type="submit" value="Submit">
      </td>
    </tr>
  </table>
</form>

Answer 1

只需放置 占位符="" 加载的数据不会覆盖标签