Możesz też wykorzystać zdarzenie HTMLElement.blur()
Przykład, aktualizowanie po "utraceniu" kursora ("wyjściu") z input-a lub naciśnięciu Enter-a.
<label for="income">Twój przychód:</label>
<input type="number" id="income" name="income" min="0">
<div class="wallet">Twój porfel: <span>0</span> zł</div>
label {
display: block;
width: 8em;
}
input[type=number] {
width: 8em;
margin: 0.25em 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-moz-appearance: textfield;
appearance: textfield;
-webkit-appearance: none;
margin: 0;
}
.wallet {
margin: 1em 0;
}
window.onload = () => {
const input_income = document.querySelector('#income');
const wallet_value = document.querySelector('.wallet span');
input_income.focus();
input_income.addEventListener('focus', () => {
input_income.value = '';
})
input_income.addEventListener('blur', updateWallet)
input_income.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.keyCode === 13) {
updateWallet();
input_income.value = '';
}
})
function updateWallet() {
const wallet_current_value = wallet_value.innerText * 1;
const income_value = input_income.value.trim() * 1;
if (income_value != '') {
wallet_value.textContent = parseFloat(wallet_current_value + income_value).toFixed(2);
}
}
}