CODEWITHSUNDEEP
javascriptjquery
Prasad
Prasad

Reputation: 132

How to capture TextArea text changed event in JQuery

I am using QR Code Reader JavaScript.
This JavaScript captures image using camera, tries to decode QR Code and set the decoded text to TextArea as output.

This is working well.

But when text set to TextArea I need to capture event so I can do further processing.

I have tried different combinations with available solutions as follows:

1st 

$('.barcodeInput').change(function(){
    debugger;
    alert("changed");
});

2nd 

$('body').delegate('.barcodeInput', 'keyup change', function(){
    alert("changed");
});

3rd

$('.barcodeInput').bind('input propertychange', function () {
    debugger;
    alert("changed");
});

I have defined all these in and out side of document.ready(function(){ // code here});

But still it is not wroking.

My QR Code decoding JavaScript set text to TextArea after successful decoding.

I can trigger event manually form that JavaScript but that will be patch work.

I want permanent solution for problem like these.

Thanks is advance

Upvotes: 4

Views: 10283

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You could attach the event using change() or .on(), like :

$('.barcodeInput').change(function(){
    alert("changed");
});
//Or
$('.barcodeInput').on('change', function(){
    alert("changed");
});

And you could invoke the event when you change the text :

textarea.val('new val').change();
//Or
textarea.val('new val').trigger('change');

NOTE : bind and delegate are deprecated.

Hope this helps.

$('.barcodeInput').on('change', function(){
    alert("changed");
});

$('.barcodeInput').val('new val').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class='barcodeInput'></textarea>

Upvotes: 4

Related Questions