如何使用javascript获取具有更改事件的文本框的第一个值？

Question

I have textbox with value binded from database. I have onkeyup event in the textbox. I want to make calculation like old value plus new value. Is there a function that can get textbox value after page load using javascript?

eg First value while page load is 5 when I change textbox to 3, then label value would be 8 when I change textbox again to 4, then label value would be 9.

Answer 1

You have to preserve the original value in a data attribute in addition to knowing the actual value . For example:

<input id="my-text-box" type="text" data-original-value="5" value="5">

Then you can access the original value via jQuery:

$('#my-text-box').data().originalValue;

or in plain JavaScript:

var element = document.getElementById('my-text-box');
var originalValue = element.getAttribute("data-original-value");

and the new value with jQuery:

$('#my-text-box').val();

or in plain JavaScript:

var element = document.getElementById('my-text-box');
var originalValue = element.value;

EDIT: for plain JavaScript answers.

Answer 2

If you have a text input with an id of my-text-input , and a variable called originalValue :

window.onload( function() {
 originalValue = document.getElementById('my-text-input').value 
});

Answer 3

You can use data attribute and set the default value in it. Then use onchange event listener and once the focus is removed from the input it will get the default value and the new value. Use parseInt to convert string to number before adding

 function updateValue(e) { let defaultVal = e.target.dataset.val; let newVal = e.target.value; e.target.value = parseInt(defaultVal, 10) + parseInt(newVal, 10) } 

 <input type='text' value='5' data-val='5' onchange='updateValue(event)'>