Cómo configurar autocomplete = “ off ” en forma de rayo

El problema

Estoy tratando de establecer el atributo HTML auto-complete="off" en un elemento de entrada con la clase slds-input. Por alguna razón, la plantilla siempre convierte esto a autocomplete="true" en el renderizado.

He creado un campo de búsqueda personalizado para buscar sObjects, por lo que el comportamiento de autocompletado del navegador es obviamente inútil, y si esto fuera HTML normal, podría incluir el atributo autocomplete con el valor off, pero el aura no parece déjame.

Una respuesta que encontré sugirió usar html-autocomplete="off", así que también probé eso, y cuando lo hago, el atributo simplemente no se representa en absoluto.

Lo que probé

  • Intenté incluir autocomplete="off" y html-autocomplete="off" en la etiqueta de entrada
  • Intenté incluir autocomplette="off" y html-autocomplete="off" en la etiqueta de formulario que rodea la etiqueta de entrada
  • Intenté ajustar el valor aria-autocomplete (que no hizo nada, no es que realmente lo esperaba, pero al menos quería intentarlo).
  • En este PDF de los documentos de aura el atributo html autocomplete no se menciona.
  • He encontrado una lista de admite etiquetas HTML en aura , pero no hay una lista de atributos admitidos
  • No puedo encontrar nada sobre este comportamiento en los documentos de Lightning, y es muy difícil buscar en Google debido al elemento de rayo / aura de autocompletar

¿Hay alguna forma de hacer esto? ¿O documentación sobre este comportamiento?

Ejemplo de código:

Esto:

<aura:component> <input type="text" autocomplete="off" /> </aura:component> 

saldrá al final HTML como este:

<input type="text" autocomplete="true" data-aura-rendered-by="5:0"> 

Comentarios

  • Qué ' s le impide utilizar la entrada html regular? ¿Podría agregar algún código al marcado para ayudar a reproducirlo?
  • Lo que ' me detiene es la forma en que el aura (o tal vez un rayo) modifica el código. Más código agregado
  • Utilizo autocomplete = " contraseña " en lugar de off / on como Chrome lo respeta. Chrome normalmente ignora el autocompletado de lo contrario. Pruébelo y vea si funciona para usted

Respuesta

Posible a partir de Spring 19. Consulte aquí

autocompletar: controla el autocompletado del campo. Este atributo es compatible con los tipos de entrada de correo electrónico, búsqueda, teléfono, texto y url. Se admiten los valores de encendido y apagado, pero el comportamiento de autocompletar depende del navegador. Cuando establece el atributo de autocompletar, el componente lightning: input pasa el valor para que lo interprete el navegador.

Respuesta

Acabo de hablar con el equipo de asistencia de Salesforce y aparentemente esto es imposible actualmente.

(Dejo mi respuesta aquí no como la respuesta aceptada porque quiero que alguien encuentre esta pregunta cuando haya una mejor opción y la responda y la marcaré como aceptada.)


Solución alternativa:

Sin embargo, yo Estoy usando la siguiente solución de truco:

Le di a mi elemento una identificación y ejecuté este JS:

turnOffAutocomplete : function(component) { var input = document.getElementById("id-of-the-input"); if(input.getAttribute("autocomplete") !== "off"){ input.setAttribute("autocomplete","off"); } } 

Lo estoy ejecutando no en init (porque se ejecuta antes de que los elementos se hayan renderizado) sino cuando el elemento de entrada está enfocado.

Cualquier comentario para mejorar esto (por lo que no «No tiene que ejecutarse cada vez que se enfoca la entrada, por ejemplo) sería apreciado.

Comentarios

  • Mueva esta lógica al renderizador.

Respuesta

La única solución que encontré fue use un área de texto con filas = «1»

<textarea type="text" class="slds-input" rows="1" style="resize : none;" /> 

Puede agregar algunas slds clases para tener la misma visualización que una entrada normal.

Respuesta

Puedes probar esto «s funcionó para mí mediante el uso de aura: id y luego desactivé «autocompletar». Puede usar en el método init del controlador de iluminación

component.find("fieldSelect").set("v.autocomplete","off"); 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *