Detect change in input element, set with JavaScript

Question

I have a slider connected to an input element. I have no control on the slider implementation. Whenever the slider is moved, the input element value is updated. I can check that with $('#my-input').val()

But, as documented here, I am not able to detect that change with the .change() event handler, because JavaScript manipulation of the input's value does not trigger that event.

My question is: how can I detect that the value in my input element has changed? What event - if any - is triggered in this case?

Possible duplicate of Detect input value change made by jQuery function — Dave
– Dave, Commented Nov 30, 2015 at 21:55

rorymorris89 · Accepted Answer · 2015-11-30 22:04:07Z

0

It'd be good to see a code example so we could understand what events would be taking place on which elements whilst the slider is being moved, but it should be something along the lines of:

$(document).on('mousedown','.slider-handle',function(){
    curVal = $('input').val();
});

You'll need to replace .slider-handle with a selector appropriate to the slider you are using, mousedown might need changing also, depending on which events you want to hook onto

answered Nov 30, 2015 at 22:04

rorymorris89

1,2099 silver badges15 bronze badges

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

Comments

Roberto Capelo · Accepted Answer · 2015-11-30 22:04:39Z

0

Use this function to detect:

function addClassNameListener(elemId, callback) {
  var elem = document.getElementById(elemId);
  var lastClassName = elem.className;
  window.setInterval( function() {   
    var className = elem.className;
    if (className !== lastClassName) {
      callback();   
      lastClassName = className;
    }
  },10);
}

Usage:

addClassNameListener("moved", function(){
  // do something...
})
// This code will listem all classes that contains "moved" classname and callback that function

answered Nov 30, 2015 at 22:04

Roberto Capelo

792 silver badges4 bronze badges

Comments

adzza24 · Accepted Answer · 2015-12-02 07:52:32Z

0

If you are using jQuery UI for the slider functionality, the change event will fire on the slider element instead of the input.

$('.slider').slider(); //init jQuery UI slider
$('.slider').on('slidechange', function(event, ui) {
    var newVal = ui.value;

    //do something when the value changes
});

You can read more about this and other events on the jQuery UI page: http://api.jqueryui.com/slider/#event-change

You also have access to events like slide and slidestop which might be more appropriate for your solution.

answered Dec 2, 2015 at 7:52

adzza24

2,16318 silver badges31 bronze badges

Collectives™ on Stack Overflow

Detect change in input element, set with JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related