I have a text input which has its content changed via javascript. However, the onchange event doesn't seems to capture this change. Is there a way to detect when an input is changed via Javascript?
5
-
2please add the code which changes the input.Max Novich– Max Novich2013-12-08 08:38:58 +00:00Commented Dec 8, 2013 at 8:38
-
It's a dateRangePicker which doesn't support a callback.Lucian Radu– Lucian Radu2013-12-08 08:40:11 +00:00Commented Dec 8, 2013 at 8:40
-
Please specify, usually plugins can support such things.Max Novich– Max Novich2013-12-08 08:41:27 +00:00Commented Dec 8, 2013 at 8:41
-
dangrossman.info/2012/08/20/…Lucian Radu– Lucian Radu2013-12-08 08:42:20 +00:00Commented Dec 8, 2013 at 8:42
-
There is a paragraph which specifes the callback. it is named "Pre-defined Ranges & Callback Example"Max Novich– Max Novich2013-12-08 08:44:02 +00:00Commented Dec 8, 2013 at 8:44
Add a comment
|
7 Answers
Use JQuery so that you can do
$('element').on('input', function () {
alert(this.value);
});
Otherwise, with JavaScript alone use onkeyup="alert(this.value);"
If it is for a datePicker, then you probably can use its onSelect event.
This answer adds an event for the plugin you specified in the comments Date Range Picker how to fire an event on entering a date
============================ Quote Start ================================
function myCallBack(start, end) {
$('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
alert('hello world'); //etc, your code here
}
// attach daterangepicker plugin
$('#dateRange').daterangepicker(options, myCallback);
you also could even define your own custom event handler and trigger it in the callback as well.
example
$(document).on('myCustomEvent', function () {
// your code here
});
$('#dateRange').daterangepicker({
// .. //
function(start, end) {
$('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
$(document).trigger('myCustomEvent');
});
============================ Quote End ================================
Comments
If you want to track changes as you type, use onkeydown. If you need to trap paste operations with the mouse, use onpaste (IE, FF3) and oninput (FF, Opera, Chrome, Safari1).
1 Comment
Lucian Radu
The content is changed by a dateRangePicker which doesn't support callback. I tried oninput and onpaste but they don't seems to work.
if you are using HTML5, you can use the input event
document.getElementById("textinput").addEventListener("input", function(e){});
Comments
Once you have changed the inputs value you can call onchange() on the input to trigger the onchange event
document.getElementById('myInput').onchange();
Comments
Forwarding to our conversation in comments.
Here is the Link to your DateRangePicker plugin On Github
There is a paragraph which expains the using on callbacks....
Quote From the Link
The constructor also takes an optional options object and callback function. The function will be called whenever the selected date range has been changed by the user, and is passed the start and end dates (moment date objects) as parameters.
$('input[name="daterange"]').daterangepicker(
{
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
function(start, end) {
alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
}
);
Comments
Actually, you can capture the changes that are occuring.
Try this:
var something = ""; // create variable..
$('input').keyup(function () { // on a key up..
something = $(this).val(); // update the variable..
}
Otherwise, you can simply use .replace(value, '') to remove the previous words and just write the newly written words in the variable.
To detect the change, you need to save the initial state, and then match it with the final state. To save the initial state you need to create a variable at the page load. And then after the time, you can compare both and remove the initial words and continue.
answered Dec 8, 2013 at 8:49
Afzaal Ahmad Zeeshan
15.9k14 gold badges61 silver badges106 bronze badges
Comments
To answer the question... Using javascript (because jquery et al is not javascript, its programmed in javascript)
Object.addEventListener("change",yourFunc );
where Object is the object you want to listen to, this can be the document, an element, depending on what you want to detect.
