2

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>
George
  • 489
  • 2
  • 7
  • 20
  • It's happening in any browser? – Ole EH Dufour Oct 05 '18 at 20:04
  • I tested the whole form on Chrome and IE and it got worse. See results I added to the question above. – George Oct 06 '18 at 01:20
  • If you look at https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off, you'll notice that browsers like Chrome are essentially ignoring autocomplete off for "standard" fields like name, email, address, etc. If you want it to be reliable, you'll need to change the input's name to be something unrelated to name/email. – Nick Wyman Oct 06 '18 at 05:24
  • That worked. And it explains why some text labels worked and some didn't. I sure hope the Goggle Bros. don't wonder why more of us favor more public oversight every day. – George Oct 06 '18 at 23:09

1 Answers1

0

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

Shivang Raj
  • 11
  • 1