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, Jul 06 '18 at 07: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, Jul 08 '18 at 07: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, Jul 08 '18 at 08:08

score 1 · Answer 1 · answered Jul 06 '18 at 08:22

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 06 '18 at 08:22

Vignesh Raja

7,927
1
33
42

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. – Josh Jul 06 '18 at 11:15
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. – Vignesh Raja Jul 06 '18 at 11:28
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. – Josh Jul 06 '18 at 12:05
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. – Vignesh Raja Jul 06 '18 at 13:55
Yes, that is correct. The original input field looks like this: `` 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. – Josh Jul 06 '18 at 16:04
To trigger that method, call `elem.onkeyup()` instead of `elem.keyup()` in the change event listener. Then it will fire for sure whenever the change event fires. – Vignesh Raja Jul 06 '18 at 16:11
I have updated the script but it is not working. The result is still the same. – Josh Jul 07 '18 at 15:13
(1) The element with id `sim1` has no onkeyup event assigned in it. So calling `elem.onkeyup` will throw an error in console. (2) Also, no keyup event triggered because of the first point. (3) First set a keyup event in the element and try the same code. It works. (4) [Updated fiddle](https://jsfiddle.net/mj8g4xa2/16/). Here I set the onkeyup method in the element and you can see the value copies and the event is triggered on clicking the `New Script` button. – Vignesh Raja Jul 09 '18 at 06:10

score 0 · Accepted Answer · answered Jul 08 '18 at 08:12

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

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! — Josh, Jul 08 '18 at 12:02

Trigger onKeyUp from script after input value is changed

2 Answers2