Powiedzmy, że mam formularz logowania z loginem i hasłem. Oba są takie same i chcę wprowadzić wartość w trzecim polu wprowadzania tekstu i aktualizować wartości loginu i hasła podczas wpisywania.
Jak mogę to zrobić, używając tylko niewielkiej ilości JavaScript i HTML?
2 odpowiedzi
Jeśli masz to:
<html>
<body>
<input type='text' id='login'/>
<input type='password' id='password'/>
<input type='text' id='update'/>
</body>
</html>
Możesz zrobić coś takiego:
<script>
var login = document.getElementById('login'),
password = document.getElementById('password'),
update = document.getElementById('update');
update.addEventListener('change', function() {
login.value = update.value;
password.value = update.value;
});
</script>
Musisz dodać zdarzenie dla trzeciego wejścia, a następnie za każdym razem, gdy się zmieni, musisz zaktualizować login i hasło do ich aktualnej wartości.
Nie testowałem tego kodu, więc nie używaj go tak, jak jest, zrobiłem to, aby pokazać przykład.
Możesz dodać detektor zdarzeń do pola tekstowego, w którym użytkownik pisze dla zdarzenia keypress. Po naciśnięciu klawisza możesz następnie zastosować bieżącą wartość pola tekstowego do docelowego pola tekstowego.
document.getElementById('txtType').addEventListener('keyup', e => {
const copyTextInput = document.getElementById('txtCopied');
copyTextInput.value = e.target.value;
});<label for="txtType">Type Here</label>
<input id="txtType" />
<br />
<label for="txtCopied">Copied Text as you're typing</label>
<input id="txtCopied" />