javascript - 如何防止占位符覆盖 autocomplete="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">

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

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

有什么建议么？

添加了 10/5/18 -- re: 下面关于浏览器的问题。今天情况变得更糟了。

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

但正如下面添加的评论所示，Chrome 变得不一致。名字、名字和姓氏以及电子邮件文本框会忽略 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>

标签： javascripthtmlinput

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

问题描述

解决方案

推荐阅读