0

I am needing to Trigger an Event when the value of a textarea html element is updated via Javascript.

The issue using standard events is that the element must have focus and then when focus is lost the event triggers. The element I am working with will never be interacted with by end users. How do I accomplish adding an event to detect that this value has been set?

I've seen some solutions that use jQuery however each solution I've tried seems to have the same issue. Whether I manually set an event to the element by assigning a function within the element in plain HTML or by assigning the event using Javascript the event still doesn't fire until there is some sort of user interaction.

Full very slim code below and short vid showing the issue. Clicking the button updates the textarea but does not trigger any events.

<!DOCTYPE html>
<html>
    <head>

        <title>Update Text Area via Javasdcript and Trigger an Event</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

        <h3>The goal below is to click the button which sets the 'value' of the &lttextarea&gt element.  Updating the &lttextarea&gt should then Trigger an Event.</h3>
        <textarea id="txtArea" oninput="alert('You just changed the textarea.')"
        placeholder="Type in this box. When you click away an alert will be generated."></textarea>

        <br /><br />

        <button id="btnSetTextArea" onclick="setTextAreaValue()" value="submitData" type="submit">Set Text Area</button>
        
        <script>

            function setTextAreaValue() {
                document.getElementById("txtArea").value = "Set something to the TextArea Element";
            }

        </script>
    </body>
</html>

enter image description here

Code Novice
  • 2,043
  • 1
  • 20
  • 44
  • Setting the value won't fire an event, just manually call whatever code you need to run after setting the textarea – Patrick Evans Apr 06 '21 at 21:52
  • Does this answer your question? [How to trigger event in JavaScript?](https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript) – Daniel Beck Apr 06 '21 at 21:52
  • An event being triggered by a mechanism I don't have any control over is updating the value of this element. I wonder if there is another approach I am not able to think of. SQL guy here and I am mostly new to javascript. – Code Novice Apr 06 '21 at 22:09

0 Answers0