Javascript 如何防止占位符覆盖自动完成="；off"；？

向文本输入元素添加占位符属性似乎否定了我的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">

是否可以使用占位符而不返回恼人的下拉列表

我相信有足够多的js代码，包括onblur、onfocus和onkeypress，可以模拟占位符，而不会出现令人讨厌的下拉列表。但我希望有一个更简单的方法

有什么建议吗

添加了2018年5月10日--re：关于浏览器的以下问题。今天情况变得更糟了

IE浏览器始终为所有文本框启用autocomplete=“off”

但正如下面添加的评论所示，Chrome已经变得不一致。名、第一名和第二名以及电子邮件文本框忽略autocomplete=“off”。但它对两个中间名都表示尊敬。我只是看不出任何文本框的编码方式有什么不同

这是我表格的完整代码。[我将标签/输入对放在一张表中，将它们排成一行。（作为一个似乎已断开连接的旁白，因为单击标签不会将焦点转移到输入上。但这是另一天的事情）]

**元素-->**
****
名字：
****
中间名-第一名：
**元素-->**
****
第二个中间名-第二个
****
姓氏：
要素
****
第二姓：
要素
要素
****
电邮：

放好 占位符=“”

---

数据加载不会覆盖标签

这在任何浏览器中都会发生？我在Chrome和IE上测试了整个表单，结果变得更糟。查看我添加到上述问题中的结果。如果您查看，您会注意到浏览器（如Chrome）基本上忽略了“标准”字段（如姓名、电子邮件、地址等）的自动完成功能。如果您希望它可靠，您需要将输入的名称更改为与姓名/电子邮件无关的名称。这是有效的。这也解释了为什么有些文本标签起作用，有些则不起作用。我当然希望Goggle兄弟们不要奇怪为什么我们中越来越多的人每天都喜欢更多的公众监督。

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