execute JS function on keystroke

Question

I have created a function that when the use fills in the two inputs comm and hour it populated the result in another input called phone.

calculate = function()
{
    var comm = document.getElementById('comm').value;
    var hour = document.getElementById('hour').value; 
    document.getElementById('phone').value = Math.round(comm*hour*phone/60);
}

At the moment if you type in comm and hour and then you click outside the input it calculates the result in phone.

What I am trying to achieve is to calculate at the moment you type on any of the two fields.

I have tried to find something that can help me here, but with no luck. Any advice?

Charlie Fish · Accepted Answer · 2017-12-23 08:25:15Z

3

Look into onkeydown. Something like the following code.

document.onkeydown = calculate = function()
{
    var comm = parseFloat(document.getElementById('comm').value);
    var hour = parseFloat(document.getElementById('hour').value); 
    document.getElementById('phone').value = Math.round(comm*hour*phone/60);
}

This will call that function whenever a key is pressed on the page.

edited Dec 23, 2017 at 8:25

answered Dec 23, 2017 at 8:17

Charlie Fish

21k23 gold badges108 silver badges204 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Charlie Fish Over a year ago

@lStoilov Awesome! Consider accepting if you feel like it helped you so others can benefit also. Happy coding!!

lStoilov Over a year ago

Will accept in 10 min, due to some limitation of the website :)

Charlie Fish Over a year ago

@ISoilov Thanks! Happy coding!!

programtreasures · Accepted Answer · 2017-12-23 08:18:27Z

2

As @CharlieFish answer Use document.onkeydown to call event on key down and use parseFloat to convert your values to float

document.onkeydown = calculate = function()
{
    //hope you have define phone value
    var comm = parseFloat(document.getElementById('comm').value);
    var hour = parseFloat(document.getElementById('hour').value); 
    document.getElementById('phone').value = Math.round(comm*hour*phone/60);
}

answered Dec 23, 2017 at 8:18

programtreasures

4,2882 gold badges13 silver badges30 bronze badges

Comments

prabin badyakar · Accepted Answer · 2017-12-23 08:25:05Z

1

document.body.onkeypress(function(){
   // invoke your function here calculator()
   // additional logic can we added here too.
})

answered Dec 23, 2017 at 8:25

prabin badyakar

1,7463 gold badges16 silver badges24 bronze badges

Comments

DevStormUK · Accepted Answer · 2017-12-23 08:45:07Z

1

If you want it to start working immediately use a IIFE (immediately invoked function expression) and add an event listener for 'keyup' so it will fire once the value in the input field has been set:

(function(){
  document.getElementById('foo').addEventListener('keyup',function(){
  //add your logic here
  console.log('someone pressed a key!');
});
}());

...just remember to parseFloat the values in your example before you try to calculate, as when you get them from the element they will be typeof string ...

so value = parseFloat(value);

edited Dec 23, 2017 at 8:45

answered Dec 23, 2017 at 8:39

DevStormUK

2882 silver badges10 bronze badges

Comments

Yen Nguyen · Accepted Answer · 2017-12-23 08:21:47Z

0

I think what you need is trigger calculate function at text change event, just try this

<input type="text" id="comm" onchange="calculate();"/>
<input type="text" id="hour" onchange="calculate();"/>

answered Dec 23, 2017 at 8:21

Yen Nguyen

1044 bronze badges

Collectives™ on Stack Overflow

execute JS function on keystroke

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related