AutoComplete

[thauealfredo]

Galera, eu tenho um input type password, que serve para o usuario confirmar a senha atual. Porem quando clica no campo a aparece a opção de selecionar a senha salva no site. Alguem sabe com desabilita isso ? Já tentei com autoComplete='off', false, new-password. Ja tentei colocar readOnly no campo e tirar no click. Ja tentei colocar um input hidden no começo do form. E nada da jeito

[wmartins]

@thauealfredo, consegue montar um exemplo com o problema e como reproduzir? Acho que fica mais fácil para explorar um pouco mais e tentar algumas soluções. Além disso, é importante comentar sobre qual browser tu tá utilizando na tua implementação, visto que isso acaba variando um pouco de browser para browser (mais a seguir).

Pesquisei um pouco e, aparentemente, rolou uma confusão sobre a implementação dessa properiedade de autocomplete, e isso vem junto dessa funcionalidade de salvar informações preenchidas anteriorimente (logins e senhas) e o uso de ferramentas de gerenciamento de senhas.

Alguns links interessantes:

• https://stackoverflow.com/a/38961567/2624575
• https://bugs.chromium.org/p/chromium/issues/detail?id=468153
• https://bugzilla.mozilla.org/show_bug.cgi?id=1119063

Pelo que vi, utilizar algo como <input type="password" autocomplete="random-string-123456" /> pode funcionar, embora seja necessário entender melhor os impactos de fazer isso.

De qualquer forma, e acho que vale a pergunta, realmente é algo que tu precisa remover?

[thauealfredo]

Sim, é algo que eu preciso remover, pois como é uma campo para validar se a senha digitada é a msm cadastrada, n faz sentido clicar no campo e aparecer a senha que está salva. Eu uso o chrome mas o ideal serial um solução que cobrisse os outros navegadores tbm. É apenas um input type='password' que quando clica aparece a senha ja salva no site com sugestao, essa é a forma de reproduzir

[wmartins]

@thauealfredo, achei bem interessante o problema e investi um tempo para tentar entender melhor. Vou te apresentar o motivo de isso acontecer (ou, o meu entendimento do porquê), uma maneira de resolver e a minha opinião sobre o assunto.

O motivo

Os browsers têm ficado cada vez mais amigáveis/convenientes para os usuários, com isso, existe uma área cinzenta (que fica fora da especificação padrão do W3C) que não diz nada a respeito sobre as interface deles em si, com isso, cada browser pode implementar funcionalidades em cima dos padrões e tá tudo certo. Falando especificamente desse caso, o Chrome faz uma implementação que aumenta a funcionalidade de <input> do tipo password para que seja mais fácil fazer o gerenciamento de senhas.

O problema aqui é que, aparentemente, não existe uma maneira de controlar esse comportamento. E por um lado isso faz sentido, pois é um "acordo" entre a pessoa e o browser, dizendo que ela quer utilizar gerenciamento de senhas. Dessa forma, o Chrome não deixar isso ser customizado é uma maneira de garantir que aquela pessoa use o gerenciamento de senhas sem interferência de quem está fazendo aquela página. Acho que a mesma analogia vale para caso a pessoa esteja utilizando alguma extensão para gerenciamento de senhas ao invés da funcionalidade do Chrome.

Uma solução não ideal e que talvez pode dar algum problema no futuro

Existem várias tentativas de fazer isso que tu quer funcionar, e uma discussão gigante com várias delas aqui:

https://gist.github.com/niksumeiko/360164708c3b326bd1c8

No fim das contas, a maneira como eu consegui fazer isso funcionar foi alterar o comportamento padrão de vários eventos do browser (event.preventDefault). Dessa forma eu (a pessoa desenvolvendo) removo o controle de algumas decisões do browser e passo a implementar por mim mesmo. Embora isso possa parecer uma boa ideia no papel, na prática dá muita dor de cabeça, pois existem vários comportamentos que o browser resolve para nós e que nem notamos (trago exemplos posteriormente).

Caso queira ver funcionando: https://jsfiddle.net/yt9xqz17/2/

Código da solução

document.addEventListener('DOMContentLoaded', () => {
  const passwords = document.querySelectorAll('[data-prevent-autocomplete]');

  [].slice.call(passwords).forEach(input => {
    // Faz com que o input seja readonly inicialmente
    input.setAttribute('readonly', true);

    // Quando o input recebe o foco, remove o atributo readonly
    input.addEventListener('focus', e => {
      e.preventDefault();
      setTimeout(() => {
        input.removeAttribute('readonly');
      }, 0);
    });

    // Quando o input sai de foco, adiciona o valor de readonly
    input.addEventListener('blur', e => {
      input.setAttribute('readonly', true);
    });

    // Toma o controle dos eventos de teclado
    input.addEventListener('keydown', e => {
      const { value, selectionStart, selectionEnd, selectionDirection } = input;
      const { key, metaKey, ctrlKey } = event;

      // Se for algum caracter com a tecla CTRL ou Meta (MacOS), utilizar o evento padrão
      if (metaKey || ctrlKey) {
        return true;
      }

      // Se for backspace
      if (e.keyCode === 8) {
        e.preventDefault();

        // Se algum texto estiver selecionado, remove o texto selecionado
        if (selectionDirection !== "none") {
          const start = value.substring(0, selectionStart);
          const end = value.substring(selectionEnd, value);
          input.value = start.concat(end);
          return;
        } 

        // Caso nenhum texto esteja selecionado, remove um caractere do final
        input.value = value.slice(0, value.length - 1);
        return;
      }

      // Se for uma tecla única, concatena com o valor atual
      if (key.length === 1) {
        e.preventDefault();
        input.value = value.concat(key);

        return;
      }

      return true;
    });

    // Toma o controle de eventos de mouse
    input.addEventListener('mousedown', e => {
      e.preventDefault();
      input.blur();

      setTimeout(() => {
        input.focus();
      }, 0);
    });
  });
});

Screen.Recording.2021-02-24.at.10.20.09.mov

Como tu pode perceber, eu precisei implementar vários eventos, como, por exemplo, o evento de pressionar uma tecla (que acabava fazendo com que a janelinha de gerenciamento de senhas aparecesse). Com isso, também foi necessário implementar a funcionalidade de backspace:

// Se for backspace
if (e.keyCode === 8) {
  e.preventDefault();

  // Se algum texto estiver selecionado, remove o texto selecionado
  if (selectionDirection !== "none") {
    const start = value.substring(0, selectionStart);
    const end = value.substring(selectionEnd, value);
    input.value = start.concat(end);
    return;
  } 

  // Caso nenhum texto esteja selecionado, remove um caractere do final
  input.value = value.slice(0, value.length - 1);
  return;
}

Também precisei controlar o comportamento padrão de mousedown do browser, para evitar que o gerenciador de senhas apareça ao clicar no input:

// Toma o controle de eventos de mouse
input.addEventListener('mousedown', e => {
  e.preventDefault();
  input.blur();

  setTimeout(() => {
    input.focus();
  }, 0);
});

Minha opinião sobre o assunto

Particularmente falando, eu não me preocuparia muito com essa questão. Falando de maneira prática, se a pessoa usa um gerenciador de senhas, acho que não devemos tentar impedí-la disso. Sobre a questão disso não fazer sentido, acho que é uma opinião bem pessoal e, meu sentimento é que o time do Chrome deve ter feito algum estudo sobre isso ou algumas pesquisas com os usuários para entender como montar essa funcionalidade.

Dito isso, honestamente eu acho que não vale a pena tentar fazer essa implementação por ti mesmo. Primeiro pois, como pode ver no exemplo que te mandei, ficou um código bem ruim de gerenciar, com vários detalhes para reimplementar o comportamento padrão do browser (e eu provavelmente esqueci de alguns). Segundo, nada garante que o Chrome não vá mudar a maneira como isso é feito internamente, fazendo com que esse código pare de funcionar em uma nova versão e tu precise dar manutenção para isso no futuro. Por fim, anular a implementação padrão do browser normalmente traz mais problemas do que soluções, é só olhar a complexidade de algumas libs para estilizar <select>, mexer com a scroll bar, entre outras.

Um último ponto, esse código que te trouxe provavelmente tem vários bugs e tem grandes chances de te trazer mais problemas do que soluções. Quis trazê-lo para mostrar uma forma de fazer isso e também para exemplificar o quão complexo é esse tipo de coisa. Não recomendo usá-lo.