onBlur - восстановить входные значения после очистки по фокусу

Question

У меня есть несколько полей ввода со значениями, динамически вставленными. Ниже упрощенный пример:

<input id="amount1" type="number" onfocus="" oninput="update()" 
<input id="amount2" type="number" onfocus="" oninput="update()" 
<input id="amount3" type="number" onfocus="" oninput="update()" 

Значения вставляются с помощью:

document.getElementById("amount1").value = Amount1; 
document.getElementById("amount2").value = Amount2; 
document.getElementById("amount3").value = Amount3; 

После того, как пользователь нажимает на поле ввода, значение сбрасывается, но если ничего не введено, то я хотел бы ONBLUR восстановить Значение. Не удалось найти решение в Javascript или JQuery.

Answer 1

Вы можете сохранить значение в атрибуте data- элемента.

<input id="amount1" type="number" onfocus="focus(event)" oninput="update()" onblur="blur(event)"> 

магазин исходное значение:

function focus(e) { 
    var elm = $(e.target); 
    elm.data('orig-value', elm.val()); 
    elm.val(''); 
} 

Затем восстановить значение на onblur события:

function blur(e) { 
    var elm = $(e.target); 
    if (!elm.val()) { 
     elm.val(elm.data('orig-value')); 
    } 
} 

Answer 2

<input id="amount1" placeholder="Amount1" type="number" onfocus="this.placeholder = '';" onblur="this.placeholder='Amount1'" oninput="update()"/> 
<input id="amount2" placeholder="Amount2"type="number" onfocus="this.placeholder = '';" onblur="this.placeholder='Amount2'"oninput="update()"/> 
<input id="amount3" placeholder="Amount3" type="number" onfocus="this.placeholder = '';" onblur="this.placeholder='Amount3'" oninput="update()"/> 

Просто скопируйте код. он будет работать уверенно