0
292
Vistas¿Cómo deshabilitar el autocompletado de campo de texto mui?
Estoy usando la última versión de mui. Tengo un formulario de información de contacto del usuario que contiene un campo de código postal. No quiero que este campo se complete automáticamente si el valor es nulo, pero se sigue completando automáticamente con el correo electrónico guardado en mi navegador. Esto es lo que he intentado hasta ahora:
- autocompletar="desactivado"
- autocompletar="desactivado"
- autocompletar="no"
Y aquí está el código de mi campo de texto:
<Textfield name="zipCode" id="zipCode" label="Zipcode *" autoComplete='nope' value={addressDetails.zipCode || ""} onChange={updateAddressDetails} error={displayError(validationErrors?.zipCode)} helperText={validationErrors?.zipCode} fullWidth /> A continuación se muestra la captura de pantalla de mi formulario: 
Aunque, autoComplete='nope' está funcionando para otros campos como ciudad pero no para código postal.
3 Respuestas
Responde la pregunta0
Como dice mui docs :
De forma predeterminada, el componente desactiva la función de autocompletar de entrada (recordar lo que el usuario ha escrito para un campo determinado en una sesión anterior) con el atributo autoComplete="off".
Así que el código se vería así:
<TextField {...params} inputProps={{ ...params.inputProps, autoComplete: 'off', }} />0
¡Error resuelto! Descubrí el motivo por el que recibí este error, ese era un caso de uso diferente. Tengo un formulario de actualización de contraseña junto al formulario de información de contacto y ese formulario de actualización de contraseña tiene tres campos:
- Contraseña actual
- Nueva contraseña
- Confirmar contraseña
Entonces, lo que estaba sucediendo es que el campo de contraseña actual se llenó automáticamente con una contraseña guardada en el navegador porque el tipo de ese campo es 'contraseña' y el campo de código postal estaba justo encima de este campo de contraseña actual, por lo que se llenó con el correo electrónico de la contraseña guardada.
Lo que tenía que hacer era desactivar el autocompletado del campo de contraseña para que también se detuviera el autocompletado del campo de código postal con una dirección de correo electrónico. Probé las siguientes opciones para detener el autocompletado de contraseñas, pero no funcionó:
- autoComplete="nope" - autoComplete="off" - inputProps = {{ autoComplete: "off" }} - inputProps = {{ autoComplete: "nope" }}lo que realmente funcionó es:
inputProps={{ autoComplete: 'new-password' }}Al hacer esto, el autocompletado de mi campo de código postal con la dirección de correo electrónico (que era tan extraño de entender) también se desactivó.
Gracias a los chicos que publicaron respuestas por su ayuda, sus respuestas fueron correctas, pero tuve un caso de uso completamente diferente, ¡es por eso que ninguna solución funcionó!
0
Sospecho que el problema con su campo de código postal es que autocompletar es autocompletar autoComplete?: string | undefined; por lo que podría no funcionar con números.
editar: Veo que se completa automáticamente con su correo electrónico. Intenta agregar esto:
<Textfield name="zipCode" id="zipCode" label="Zipcode *" inputProps={{ autoComplete: 'off' }} value={addressDetails.zipCode || ""} onChange={updateAddressDetails} error={displayError(validationErrors?.zipCode)} helperText={validationErrors?.zipCode} fullWidth />