禁用浏览器自动填充

Posted by 薛纪昌 on August 24, 2018

原因

我们在进行开发的时候,会遇到一些特殊的情况,比如下面这种情况。 form.png 两个连着的input,上面的type为text或者number,下面的type为password。

这时,浏览器就会误认为是填写用户名和密码的输入框,所以就会自动填充,这样会导致用户体验很差。

方案

之前记得可以使用 【autocomplete=’off’】属性来禁用,但是真正使用时,在chrome上无效,其他浏览器不清楚。

后来在 这里 看到,“是否自动填充应由用户来决定而不是开发者”,有道理,好吧。

然后想到既然这两个input连在一起会被误认为用户名密码输入框,那把它们拆开不就好了?

先说下我的html结构大概是这样的

div
  div
    input

div
  div
    input

所以我在第一个input后面加了一个type为text的input

div
  div
    input
    input 

div
  div
    input

然后设置该input的name和相邻的input的name一致就好了。