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 );
});
Related
I have an issue with a really simple function that is trying to fire when a text box changes. This seems to be a commonly asked question, but most of the time seems to revolve around the top $(document).ready being missing.
however this is stumping me. I have a number of other JQuery elements firing correctly, but this one doesn't seem to want to. Any ideas guys?
detection: <input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
$(document).ready(function() {
$('#txt_detection').on('change, keyup', function(){
alert "oops!";
});
});
I have it in a fiddle too: https://jsfiddle.net/hzmjjzd9/
Any help gratefully received.
You have two issues in your code. Firstly on() accepts each event in a single string that's space delimited, not comma delimited. Secondly, you're missing the brackets when you call alert(). Try this:
$(document).ready(function() {
$('#txt_detection').on('change keyup', function() {
alert("oops!");
});
});
Alternatively you can use the input event as it convers additional methods of amending the content of an input element, such as pasting using the mouse.
jQuery($ => {
$('#txt_detection').on('input', function() {
console.log("oops!");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
detection:
<input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
What if your both concerns solves by single change event as follows,
Your jsfiddle doesnt have jquery library and your alert syntax was wrong.
$(document).ready(function() {
$('#txt_detection').on('input', function() {
alert("oops!");
});
});
Here is working jsfiddle.
Give it a try, this should work.
Document-ready Document
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>
I've found a jQuery script here at Clear icon inside input text which brings a clear-icon inside an input field. It fits perfect in my website. But it's not working, when the input value is prefilled.
Demo at jsbin
I tried several onchange(), change() in additon to mousemove and also replaced in the script itself and the following in html:
<body onLoad="tog(v);">
JS
function tog(v){return v?'addClass':'removeClass';}
$(document).on('input', '.clearable', function(){
$(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('click', '.onX', function(){
$(this).removeClass('x onX').val('');
});
But it did'nt help. Do you have any solution?
You need to trigger input event programmatically using .trigger()
$('.clearable').trigger('input');
DEMO
I have two <textarea></textarea> and one <div></div>.
If I change text in #first textarea, this text copied in #second textarea. How I may catch event, that if text in #second textarea changed, I change text in div #needle? Which event?
Events change keyup paste input propertychange don't work..
I don't want to use compulsory event $('#second').change() in first event..
<textarea id="first"></textarea>
<textarea id="second"></textarea>
<div id="needle"></div>
<script>
$('#first').keyup(function(){
$('#second').val($(this).val());
});
$(document).on('change keyup paste input propertychange', '#second', function(){
$('#needle').text($(this).val());
});
</script>
JSFiddle
input event is enough.
I would recommend you to create a function like changeText that you call when input even is triggered in the second textarea and when you update the text in it.
$('#first').on("input", function(){
changeText.call(
$('#second').val( // <- You update the second textarea value
$(this).val() // with the text from the first textarea
) // <- This will return the second textarea jQuery object
);
});
$(document).on('input', '#second', changeText);
function changeText() {
// here `this` will be the second textarea jQuery object
$('#needle').text($(this).val());
}
JSFIDDLE
you should use "change" event:
$('#second').on('change', function(){
$('needle').append($(this).val()); // this appends the value
});
Note that we are using append() method. If we use html() or text(), we literally override the #needle value on each change occurrence which probably look strange and unsual (and unusable perhaps).
You could use a named function instead of using anonymous function.
function onChangeSecond()
{
$('#needle').text($(this).val());
}
you can use onChageSecond() in keyUp Events of First and Second Textarea.
This event is uncreated in jquery..
I am trying to make textbox similar to the Twitter, for this I have written code for:
Word Count
Used Events Change, Keyup and Paste
Keyup and Change Events are working fine but paste event is little bit strange, when I paste something in textarea the word count doesn't change at that moment, after some debugging I found that paste event fires up before pasting something on textbox. I don't know how they handle this in Twitter.
Here is my code:
events:
'click #textboxId' : 'submitQuestion'
'keyup #textboxId' : 'wordCounter'
'change #textboxId' : 'wordCounter'
'paste #textboxId' : 'wordCounter'
wordCounter: ->
#Code for Word Count#
Due to pre-paste nature of paste event the work count doesn't changes on that instance.
Your suggestion and help will be appreciated.
See this example.
http://jsfiddle.net/urEhK/1
$('textarea').bind('input propertychange', function() {
$('#output').html($(this).val().length + ' characters');
});
That behavior was very weird. You would think that one of those events would catch this properly? I was surprised there weren't more answers to this via Google.
function update()
{
alert($textbox.val().length);
}
var $textbox = $('input');
$textbox.bind('keyup change cut paste', function(){
update(); //code to count or do something else
});
// And this line is to catch the browser paste event
$textbox.bind('input paste',function(e){ setTimeout( update, 250); });
You should now use on() instead of bind() see this post.
It's also unnecessary to create a named function, you can just create a anonymous function.
$('#pasteElement').on('paste', function() {
setTimeout(function(){
alert($('#pasteElement').val());
}, 100);
});
You can do one thing that firstly get original data . then you can get the event paste data and add them.
$("#id").on("paste keypress ",function(event){
// eg. you want to get last lenght
var length=$("#id").val().length;
if(event.type == "paste"){
//then you can get paste event data.=
length+=event.originalEvent.clipboardData.getData('text').length;
}
});`