Skip to main content
se añadieron 222 caracteres en el cuerpo
Origen Enlace
const miForm = document.querySelector("Form")

miFormfunction autoFill(event){
const nodos = Array.addEventListenerfrom("change",e=>event.currentTarget.elements).filter(el=>el.nodeName=='INPUT')
let name = ""
nodos.forEach(el=>{
    setTimeout(()=>{
        let name = e.targetel.value
        e.targetel.value = ""
        e.targetel.value = name
    },10)
})
}
miForm.addEventListener("change",e=>{
autoFill(e)
})
miForm.addEventListener("focusout",e=>{
autoFill(e)
})
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
}


#setClientForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 360px;
    min-height: 250px;
    border-radius: 20px;
    gap: 10px;
}

#setClientForm button{
    width: 50%;
    padding: 5px;
    border-radius: 20px;
}
#setClientForm button:hover{
    width: 40%;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 900;
}

#fClientData{
    width: 90%;
}

#fClientData label{
    display: inline-block;
    width: 40%;
    text-align: right;
}
#fClientData select,#fClientData input:focus{border-color: orange; outline: none; background: none;}

#fClientData select, #fClientData input{
    display: inline-block;
    width: 55%;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    background: none;
}

input:-internal-autofill-selected {
    background: red!important;
    color: red;
    background-color: red!important;
 }
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>AutoFill</title>
</head>
<body>
    
        <form action="#" id="setClientForm">
            <h3>Formulario</h3>
            <div id="fClientData">
                <label for="">Nombre:</label>
                <input type="text" name="" id="fClientName">
                <label for="">Apellido:</label>
                <input type="text" name="" id="fClientLastName">
                <label for="">Sobrenombre:</label>
                <input type="text" name="" id="fClientNickName">
                <label for="">Teléfono:</label>
                <input type="text" name="" id="fClientPhone">
                <label for="">Diección:</label>
                <input type="text" name="" id="fClientAddres">
                <label for="">Nacionalida:</label>
                <input type="text" name="" id="fClientNationality">
                <label for="">Documento:</label>
                <select name="" id="fClientDocumentType">
                    <option value="">Cedula</option>
                    <option value="">Pasaporte</option>
                </select>
                <label for="">Numéro:</label>
                <input type="text" name="" id="fClientNip">
                <label for="">Fecha Nacimiento:</label>
                <input type="datetime-local" name="" id="fClientBirthdate">
            </div>
            <button>Enviar</button>
        </form>

    <script src="script.js"></script>
</body>
</html>
const miForm = document.querySelector("Form")

miForm.addEventListener("change",e=>{
    setTimeout(()=>{
        let name = e.target.value
        e.target.value = ""
        e.target.value = name
    },10)
})
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
}


#setClientForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 360px;
    min-height: 250px;
    border-radius: 20px;
    gap: 10px;
}

#setClientForm button{
    width: 50%;
    padding: 5px;
    border-radius: 20px;
}
#setClientForm button:hover{
    width: 40%;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 900;
}

#fClientData{
    width: 90%;
}

#fClientData label{
    display: inline-block;
    width: 40%;
    text-align: right;
}
#fClientData select,#fClientData input:focus{border-color: orange; outline: none; background: none;}

#fClientData select, #fClientData input{
    display: inline-block;
    width: 55%;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    background: none;
}

input:-internal-autofill-selected {
    background: red!important;
    color: red;
    background-color: red!important;
 }
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>AutoFill</title>
</head>
<body>
    
        <form action="#" id="setClientForm">
            <h3>Formulario</h3>
            <div id="fClientData">
                <label for="">Nombre:</label>
                <input type="text" name="" id="fClientName">
                <label for="">Apellido:</label>
                <input type="text" name="" id="fClientLastName">
                <label for="">Sobrenombre:</label>
                <input type="text" name="" id="fClientNickName">
                <label for="">Teléfono:</label>
                <input type="text" name="" id="fClientPhone">
                <label for="">Diección:</label>
                <input type="text" name="" id="fClientAddres">
                <label for="">Nacionalida:</label>
                <input type="text" name="" id="fClientNationality">
                <label for="">Documento:</label>
                <select name="" id="fClientDocumentType">
                    <option value="">Cedula</option>
                    <option value="">Pasaporte</option>
                </select>
                <label for="">Numéro:</label>
                <input type="text" name="" id="fClientNip">
                <label for="">Fecha Nacimiento:</label>
                <input type="datetime-local" name="" id="fClientBirthdate">
            </div>
            <button>Enviar</button>
        </form>

    <script src="script.js"></script>
</body>
</html>
const miForm = document.querySelector("Form")

function autoFill(event){
const nodos = Array.from(event.currentTarget.elements).filter(el=>el.nodeName=='INPUT')
let name = ""
nodos.forEach(el=>{
    setTimeout(()=>{
        name = el.value
        el.value = ""
        el.value = name
    },10)
})
}
miForm.addEventListener("change",e=>{
autoFill(e)
})
miForm.addEventListener("focusout",e=>{
autoFill(e)
})
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
}


#setClientForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 360px;
    min-height: 250px;
    border-radius: 20px;
    gap: 10px;
}

#setClientForm button{
    width: 50%;
    padding: 5px;
    border-radius: 20px;
}
#setClientForm button:hover{
    width: 40%;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 900;
}

#fClientData{
    width: 90%;
}

#fClientData label{
    display: inline-block;
    width: 40%;
    text-align: right;
}
#fClientData select,#fClientData input:focus{border-color: orange; outline: none; background: none;}

#fClientData select, #fClientData input{
    display: inline-block;
    width: 55%;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    background: none;
}

input:-internal-autofill-selected {
    background: red!important;
    color: red;
    background-color: red!important;
 }
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>AutoFill</title>
</head>
<body>
    
        <form action="#" id="setClientForm">
            <h3>Formulario</h3>
            <div id="fClientData">
                <label for="">Nombre:</label>
                <input type="text" name="" id="fClientName">
                <label for="">Apellido:</label>
                <input type="text" name="" id="fClientLastName">
                <label for="">Sobrenombre:</label>
                <input type="text" name="" id="fClientNickName">
                <label for="">Teléfono:</label>
                <input type="text" name="" id="fClientPhone">
                <label for="">Diección:</label>
                <input type="text" name="" id="fClientAddres">
                <label for="">Nacionalida:</label>
                <input type="text" name="" id="fClientNationality">
                <label for="">Documento:</label>
                <select name="" id="fClientDocumentType">
                    <option value="">Cedula</option>
                    <option value="">Pasaporte</option>
                </select>
                <label for="">Numéro:</label>
                <input type="text" name="" id="fClientNip">
                <label for="">Fecha Nacimiento:</label>
                <input type="datetime-local" name="" id="fClientBirthdate">
            </div>
            <button>Enviar</button>
        </form>

    <script src="script.js"></script>
</body>
</html>
Origen Enlace

Me he dado cuenta que al auto completar puedo copiar el texto del input y pegarlo nuevamente es allí donde ocurre la magia desaparece el fondo azul, entonces me pregunté Puedo hacer esto con Javascript? y me puse mano a la obra

La solución a este problema es Javascript Unas pocas lineas de código js serán suficiente

he activado un escuchador de evento para mi formulario y estará pendiente de los cambios efectuado dentro de mi formulario y cuando esto ocurre puedo recuperar el elemento que hizo el cambio lo que me da la posibilidad de obtener su valor, guardarlo en una variable, eliminarlo y asignar un nuevo valor.

Así después de varias pruebas logre dar con la solución. :)

const miForm = document.querySelector("Form")

miForm.addEventListener("change",e=>{
    setTimeout(()=>{
        let name = e.target.value
        e.target.value = ""
        e.target.value = name
    },10)
})
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
}


#setClientForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 360px;
    min-height: 250px;
    border-radius: 20px;
    gap: 10px;
}

#setClientForm button{
    width: 50%;
    padding: 5px;
    border-radius: 20px;
}
#setClientForm button:hover{
    width: 40%;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 900;
}

#fClientData{
    width: 90%;
}

#fClientData label{
    display: inline-block;
    width: 40%;
    text-align: right;
}
#fClientData select,#fClientData input:focus{border-color: orange; outline: none; background: none;}

#fClientData select, #fClientData input{
    display: inline-block;
    width: 55%;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    background: none;
}

input:-internal-autofill-selected {
    background: red!important;
    color: red;
    background-color: red!important;
 }
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>AutoFill</title>
</head>
<body>
    
        <form action="#" id="setClientForm">
            <h3>Formulario</h3>
            <div id="fClientData">
                <label for="">Nombre:</label>
                <input type="text" name="" id="fClientName">
                <label for="">Apellido:</label>
                <input type="text" name="" id="fClientLastName">
                <label for="">Sobrenombre:</label>
                <input type="text" name="" id="fClientNickName">
                <label for="">Teléfono:</label>
                <input type="text" name="" id="fClientPhone">
                <label for="">Diección:</label>
                <input type="text" name="" id="fClientAddres">
                <label for="">Nacionalida:</label>
                <input type="text" name="" id="fClientNationality">
                <label for="">Documento:</label>
                <select name="" id="fClientDocumentType">
                    <option value="">Cedula</option>
                    <option value="">Pasaporte</option>
                </select>
                <label for="">Numéro:</label>
                <input type="text" name="" id="fClientNip">
                <label for="">Fecha Nacimiento:</label>
                <input type="datetime-local" name="" id="fClientBirthdate">
            </div>
            <button>Enviar</button>
        </form>

    <script src="script.js"></script>
</body>
</html>