What Javascript / jQuery Event Should I Look For To Detect Form Field Filled Programmatically by Javascript / jQuery?

If this is an email input field on my form:

<input autofocus="" class="emailinput form-control" id="id_email"
       maxlength="254" name="email" required="" type="email">

I am trying to detect if the value changes AT ALL – particularly if the user used Javascript / jQuery / whatever to change it.

I watch for these events:

$("#id_email").on('input blur change paste keyup keydown keypress DOMAttrModified propertychange', function(e) {
    console.log('Email field value changed!');
})

Then do this…

$('#id_email').val('" onMouseOver="alert(1);')

and sure enough, the text " onMouseOver="alert(1); gets inserted without being detected.

What event should I be looking for to detect if a form field changes as the result of programmatically being inserted (by Javascript / jQuery for example)?

4 thoughts on “What Javascript / jQuery Event Should I Look For To Detect Form Field Filled Programmatically by Javascript / jQuery?”

  1. As far as I know, there’s no native way to detect programatic changes on inputs, the events have to be emitted manually from the code that modifies the input’s value.

    To force the event emission programmatically use jQuery’s trigger function as in:

    $('#id_email').val('" onMouseOver="alert(1);');
    $('#id_email').trigger('input');
    

    You can trigger any event and the attached handlers would execute.

    For detecting programatic changes you can see this answer: https://stackoverflow.com/a/16013352/1714951, although it has side effects of disrupting the interaction on the input and I’d recommend against it because it modifies the DOM element.

    Another approach you could take is to "poll" for the value of the input with an interval to detect changes, but that adds too much load to my liking in terms of performance.

    I’m not sure what your usecase is though.

    Reply
  2. input event should work every direct input change, but running jquery .val changes will not fire the input change event.

    You can manually trigger the value change event on input using .trigger('input').

    $("#id_email").on('input', function(e) {
        console.clear();
        console.log('Email field value changed! - ' + e.target.value);
    })
    
    $("#id_email").val('test@test.com').trigger('input');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <input autofocus="" class="emailinput form-control" id="id_email" maxlength="254" name="email" required="" type="email">
    Reply

Leave a Comment