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..
Related
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 have button edit and button save. When I click on the edit button it replaces my element with a textbox or textarea. If I click button save, which uses another function, how can I restore the element to what it was before replaceWith()?
<div class="will-be-turned-into-texbox"></div>
function edit(){
// Replace above div with texbox
}
function save_edit(){
// Change back texbox to the original div
}
In the replaceWith docs, there's a hint:
Description: Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
(My emphasis)
So...store the return value, and when you want to put it back, put it back using append or (indeed) replaceWith again.
Gratuitous example:
var replaced;
$(document).on("click", "#replace", function() {
// Save what's being replaced
replaced = $(this).replaceWith('<button id="restore">Restore</button>');
});
$(document).on("click", "#restore", function() {
// Restore it
$(this).replaceWith(replaced);
});
<button id="replace">Replace</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Note the use of delegated event handlers, to avoid having to reconnect things.
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 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 );
});
I have a tinyMCE textarea #frmbody and am using the jquery instance of it.
<textarea class="tinymce" name="frmbody" id="frmbody" cols="30" rows="20"></textarea>
I'm trying to get the contents of the textarea as the user types.
$("#frmbody").live('keyup', function(e) {
alert("keyup");
});
The code above is not working and I'm not sure why. If I remove the tinyMCE instance, the code above works fine. Any ideas?
That's because an instance of TinyMCE isn't a true textarea, so keyup events aren't detected. Try the onchange callback instead.
You can make tinyMCE own listener by:
http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp
or write your own and use built-in function getContent:
http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent
One could just grab the contents of the editor using :
tinymce.activeEditor.getContent();
If you want to attach an onchange event, according to this page, http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor, create the editor using the following code :
var ed = new tinymce.Editor('textarea_id', {
init_setting_item: 1,
...
}, tinymce.EditorManager);
ed.on('change', function(e) {
var content = ed.getContent();
$("#textarea_id").val(content); // update the original textarea with the content
console.log(content);
});
ed.render();
Please note that onchange is fire when the user unfocuses, press enter, or press a toolbar button instead of every keystroke.
It is very easy to write an own handler and assign it to the editor iframe document.
There are tinymce handlers for various events already defined like keyUp
Here is the standard way to assign an own handler to the editor iframe document
var my_handler = function(event) {
alert('my handler fired!');
};
var ed = tinymce.get('my_editor_id');
$(ed.getDoc()).bind('keyup', my_handler);
TinyMCE hides the Text Area and creates a html container. If you write content in the box its a iFrame with the name "TEXTAREANAME_ifr".
So try this:
$("#frmbody_ifr").live('keyup', function(e) {
alert("keyup");
});
I think as Thariama already said the EventHandler from TinyMCE would be the best way.