Trigger onKeyUp from script after input value is changed

Question

I have a few input fields that use onKeyUp="script" to return data the moment something is entered.

As a shortcut, I would like to be able to add a value to one of the fields when data is entered from another location AND trigger the script.

I can use document.getElementById("myID").value = MyValue; to add a specific value to the input box, or .addEventListener(); to watch another input field. This part works well.

However, I have not been able to trigger anything equivalent to onKeyUp, which will happen either when: 1. You press/release a key while the input field is in focus. 2. You focus the input and release a key AFTER the script has added a value. 3. You enter the input field via [TAB] AFTER the script has added a value.

Adding .keyup(); or .keypress(); have had no effect. I've been able to use .focus(); to focus and then change the input, but this does not have the same effect as pressing [TAB]

What can I do to trigger the onKeyUp for this field, even if the data was not manually typed?

ADDITIONAL INFO

This part works...

<input type="text" id="box1" onKeyUp="script1();">
<div id="result1" "> (script places result here) </div>

Add value from another location - Option 1

<input type="text" id="Test1">
<button type="button" onclick="TestScript()"> TEST</button>

<script type='text/javascript'>
  function TestScript() {
    var test1=document.getElementById("Test1").value;
    document.getElementById("box1").value = test1;
    document.getElementById("box1").keyup();
    return false;
  }
</script>

Add value from another location - Option 2

<script type='text/javascript'>
  window.onload = function () {
    document.getElementsByName("box2")[0].addEventListener('change', TestScript2);
    function TestScript2(){
      var test2=document.getElementById("box2").value;
      document.getElementById("box1").value = test2;
  }}
</script>

Both of these options will copy the value to the correct location, but I have not been able to get either to trigger the onKeyUp so that the original script realizes something has changed.

Non working Fiddle example: https://jsfiddle.net/mj8g4xa2/4/

Can you give us some clearly defined test cases, like write up some html and explain what you want to happen when which functions are called. — andria_girl
– andria_girl, Commented Jul 6, 2018 at 7:01
@chbchb55 I've added a Fiddle which contains a specific example as well as the code from Answer 1 which is not working. Any ideas? — Josh
– Josh, Commented Jul 8, 2018 at 7:58
Your demo isn't working because you're doing elem.onkeyup() not box1.keyup() which is what you should be doing which works. — andria_girl
– andria_girl, Commented Jul 8, 2018 at 8:08

Vignesh Raja · Accepted Answer · 2018-07-06 08:22:19Z

1

Trigger keyup programatically in;

JAVASCRIPT:

Call onkeyup() on the element.
Create a new keyup event and dispatch it using the element. Note: The source here doesn't support IE. Refer this answer for cross-browser support. Also createEvent is deprecated (MDN Docs for reference).

JQUERY:

$("#elem").keyup();
$("#elem").trigger('keyup');

Change events fire only when the input blurs, according to the MDN Docs.

Also, you should have got Uncaught TypeError: element.keyup is not a function error in your console.

var elem = document.getElementById("data");

function triggerKeyUpEvent()
{
    var e = document.createEvent('HTMLEvents');
    e.initEvent("keyup",false,true);
    elem.dispatchEvent(e);
}

function perform()
{
    console.log("KeyUp");
}

function add()
{
    elem.value = String.fromCharCode(Math.random().toFixed(2)*100).repeat(5);
    elem.onkeyup();
    triggerKeyUpEvent();
}

<input id="data" onkeyup="perform()">

<button id="add" onclick="add()">Add Random Data</button>

answered Jul 6, 2018 at 8:22

Vignesh Raja

8,9112 gold badges38 silver badges46 bronze badges

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

8 Comments

Josh Over a year ago

I have not been able to successfully implement this solution. I can see that the log shows KeyUp, but it does not appear to be doing so on the input id="box1" where the value is changed. After adding these additional functions to the script, the results are still the same. The value is modified, and the field is focused, but the script is not triggered until I press and release a key.

Vignesh Raja Over a year ago

The change event will not work until the input is focused out. elem.blur() will not trigger that focus. Only manually made click might unfocus the input. To implement a change event, setInterval can be used to validate the value of the element at 100ms interval. but the script is not triggered until I press and release a key. It doesn't mean after focussing you need to press and release a key. its the keyup event getting fired.

Josh Over a year ago

I'm not sure which one of us is confused. Triggering an onKeyUp is the only thing I'm trying to do. I don't need to do anything else (e.g. change focus) unless that is required to trigger onKeyUp. If elem.blur is required, but that will only work after "manually made click might unfocus the input" then that would defeat the entire point. I understand that "It doesn't mean after focusing you need to press and release a key". I'm saying that manually pressing a key is still required to activate the original script because the function is not doing it.

Vignesh Raja Over a year ago

So actually you want to trigger keyup in the change handler ? If thats the case, you are using it wrongly. its onkeyup not keyup. Keyup is an undefined property of the element. Error will be logged at runtime. If thats not the case, pls forgive me, that looks like i couldn't get you clearly.

Josh Over a year ago

Yes, that is correct. The original input field looks like this: <input type="text" id="box1" onKeyUp="script1();"> If I change the value of this field via a different script, I need to also trigger the onKeyUp function so that everything calculates automatically. At the moment, I must manually press a key for it to work.

|

andria_girl · Accepted Answer · 2018-07-08 08:12:39Z

0

To fix your JSFiddle update the following code:

var elem = document.getElementById("sim1");

function triggerKeyUpEvent() {
  var e = document.createEvent('HTMLEvents');
  e.initEvent("keyup",false,true);
  elem.dispatchEvent(e);
}

function add() {
  var sim1=document.getElementById("sim1").value;
  document.getElementById("box1").value = sim1;
  elem.onkeyup();
  triggerKeyUpEvent()
}

by replacing the line elem.dispatchEvent(e) with box1.dispatchEvent(e)

And the line elem.onkeyup() with box1.onkeyup()

Lastly, it would seem that you don't need to call triggerKeyUpEvent as when I removed it, it still works.

Here's the udpated JSFiddle

answered Jul 8, 2018 at 8:12

andria_girl

5,1053 gold badges28 silver badges41 bronze badges

1 Comment

Josh Over a year ago

Yes, it appears that most of the code was unnecessary. Adding only document.getElementById("box1").onkeyup(); does exactly what I needed - I must have missed the () when I tried that before asking the question. Thank you!

Collectives™ on Stack Overflow

Trigger onKeyUp from script after input value is changed

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related