How to prevent placeholder from overriding autocomplete="off"?

Question

Adding a placeholder attribute to a text input element seems to negate my autocomplete="off" attribute.

I.e. It restores the annoying banana-yellow drop down that shows prior entries. (And worse still, the drop down seems to get some of it's suggested input from things input in windows the browser opened that are not related to my page. )

More specifically:

This element has NO annoying little banana-yellow drop down w/ prior entries.

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

But if I add the placeholder attribute, the banana-yellow drop down returns.

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

Is it possible to use placeholder without getting that annoying drop down back?

I'm sure enough js code with onblur, onfocus, and maybe onkeypress, could mimic placeholder without the annoying drop down. But I was hoping for a simpler way.

Any suggestions?

Added 10/5/18 -- re: question below about browsers. Today it's gotten worse.

The IE browser consistently honors autocomplete="off" for all the text boxes.

But Chrome has become inconsistent as indicated in the comments added below. The first name, first and second last name, and email text box ignore autocomplete="off". But it honors it for both middle names. And I just can't see any differences in how any of the text boxes are coded.

Here is the complete code for my form. [I put the label/input pairs into a table to line things up. (as an aside that seems to have disconnected them, because clicking on the label doesn't shift focus to its input. But that's for another day)]

<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

just place placeholder=" " the data onload will not override the label