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

Answer 1

就地占位符="" 加载的数据不会覆盖标签

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

1 个答案: