We Keep Coding

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

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>

jQuery function bind on 'input propertychange' not firing as expected

I have jQuery code that calls a function as such:
$('#text_area').bind('input propertychange', function() {...
The element being bound to the function is a text area. When I type and delete text the function gets called just fine, however when I select all of the text, either through a hot-key or dragging the mouse, and then hit backspace the function is not called. This is the only instance where I can not get the function to call. Is this expected with the 'input propertychange' event? If so how can I change this to work as expected? Note that this holds true for Chrome, IE, and Firefox.

Would this suit your purposes?
$('#text_area').on('keyup', function() {
console.log('called');
});
Fiddle: http://jsfiddle.net/KyleMuir/ruJZD/
Also, as of jQuery 1.7 .on() (http://api.jquery.com/on/) is the preferred way to bind events.
EDIT: since someone was after right click pasted text, here is an update:
$('#text_area').on('keyup paste', function() {
console.log('called');
});
Fiddle: http://jsfiddle.net/KyleMuir/ruJZD/9/

You need to call a function when your text area get cleared. Or you want to call the same function when text is pasted into the text area.
You can use the same code what you are included in your question. I have included a working demo with this answer
<textarea id='textarea1'>data</textarea>
//....................
$("textarea").bind('input propertychange', function(){
alert($(this).val());
});
Note: Use jquery plugin
DEMO
If you want to prevent simultaneous triggers then use the below code
<textarea id="textarea"></textarea>
//.......
var text = "";
$("#textarea").on("change keyup paste", function() {
var Val = $(this).val();
if(Val == text) {
return; //prevent multiple simultaneous triggers
}
text = Val;
alert("changed!");
});
DEMO1
'Note: Checked with chrome and firefox'

.bind method has been deprecated latest 3 j query versions.
instead on we can use .on in to get correct answer.
<textarea id="anytextid"></textarea>
<div id="sethere"></div>
correct text for this change
$('#anytextid').on('input propertychange', function() {
$('#sethere').html($(this).val().length );
});

jquery blur not working on "exiting" text input even though "click" does

I'm trying to make a custom dropdown be able to be "tabbed into" using jquery. That is, it is made of a ul, and I want the text input directly above it, when tabbed out of give some sort of focus to the ul. But for some reason this
var input = $("ul.dropdown_ul").prev("input");
$("#container").on("blur", input, function(){
alert("test");
});
does not work. With click as the event, the alert fires. But blur is not working.
JSBIN
Any ideas on why this doesn't work? Thanks.

Your #container is a div. Typically blur is used on inputs, thats why it not working. The following works fine.
$("#container input").on("blur", function () {
alert("test");
});`
Update Regarding Comment:
If your looking to have a specific element have the on blur event. Just make sure you select it properly and apply the listener to it. I think this is what you're trying to accomplish.
var $input = $("ul.dropdown_ul").prev('input')
$input.on("blur", function () {
alert("test");
});
Example

Set focus on appear

I have a page that has a lot of JS created elements. So i wish to focus a textarea after it appear. I try to make it with help of addEventListener like so:
mytextarea.addEventListener('someEvent', function(e)
{
this.focus();
});
My problem is, that i can not found the right Event, that would be fired at the moment, when textarea get appended in the document, like here
document.getElementsByTagName('body')[0].appendChild(mytextarea);
Native JS Only please. Thank you

Have you tried this:
document.getElementsByTagName('body')[0].appendChild(mytextarea);
mytextarea.focus();
FIDDLE

this should work:
<textarea autofocus></textarea>

Put your focus in
$(document).ready(function(){
//Here
});
This mean your textarea is appended to the document.
And without jQuery :
window.addEventListener('load', function () {
//here
});

Checkbox Styling with SelectAll Function

Was styling the checkboxes of my webpage with jquery using the tutorial here
But i realized that I could not do SelectAll checkbox that will select all the checkboxes in my list. It works in the backend (the checkboxes are selected) but it does not show in my page.
Added a demo to show my problem. May need to port to your system to test it out
Demo
what can I add to the jQuery Custom Radio-buttons and Checkbox javascript file in the to achieve the select all checkbox function
Thank you!

You can try this FIDDLE:
$(function () {
var $chbxs = $('.checkbox');
$('#sel_all_lbl').toggle(
function() {
$chbxs.css('background-position', '50% -50px');
$('#checkboxall .truefalse').prop('checked', true);
},
function() {
$chbxs.css('background-position', '50% 0px');
$('#checkboxall .truefalse').prop('checked', false);
}
);
});
What I've done? First, in your fiddle you need to correct some syntax errors, then add a plugin code to the DOM, and you scripts to the script panel, so they will fire when DOM is ready. (This is all about jsFiddle, so you to understand how it works)
About actually your code, you attached click-handlers (.toggle()) to the checkbox element. But click event does not fire on it. Script simply changed the property of the checkbox, but there is no click. So you need to attach these handler to the element wish user actually clicks, that is square icon. (I added an id="sel_all_lbl" to it)

Try to use event handling on the select all checkbox and manually check all the checkboxes from javascript.