I want add the contents of a textarea (or a textfield) to a reactive variable and bind it to a view, similar to AngularJS double binding.
The problem to listen to keydown is that the last character will not be included. If I use keyup there will be a delay. Is there a way to listen to value change in a text field and immediately after it changes set the reactive variable?
Template.body.events({
"keydown #textarea":function(){
input.set( $('#textarea').val());
}
});
You can use the HTML5 input event which is probably better suited for what you need.
Template.body.events({
"input #textarea":function(){
input.set( $('#textarea').val());
}
});
Related
I have a HTML form. I want to enable/disable a button until user eneters text in one of the fields. I am adding an event attribute to the which triggers some javascript. This javascript will enable/disable the button.
Problem is I can't figure out what event attribute to use. What event attribute please will trigger as soon as user enters data? I tried onchange but that only gets called when i clicked back outside the text area. So it may aswell be onblur.
You can use the input
function activateForm (event) {
if(!this.value == ""){
}
}
var input = document.querySelector(".myInput");
input.addEventListener("input", activateForm , false)
There are 2 possible events that can be used: either onChange or onKeyPress. onChange will trigger when the value of an input has changed while onKeyPress will trigger every time the user types something in a text box. The onChange triggers once the user has CHANGED something in the value, and got out of the input focus. That means the user has to hit TAB or click somewhere else for the event to trigger, hence why onKeyPress might be better suited.
Read more:
http://www.w3schools.com/jsref/event_onchange.asp
http://www.w3schools.com/jsref/event_onkeypress.asp
Younger browsers also support onInput which should certainly be prefered for now, if you do not need to support older browsers.
I'm running Django 1.5 and using Dajax/Dajaxice to asynchronously update a form. The form is just a description of an object (text feild). The value of the field is always displayed and is shown as an editable textarea.
When the form is rendered, i assign an onchange event to the html form with javascript:
$('#form_id').change(function(event) {
Dajaxice.appname.description_form(Dajax.process,
{'form':$('#form').serialize(true),
'pk':$('#parent_div').attr('pk')}
)
});
This works with any kind of input except blank input. It seems like the event is not triggered if the textarea does not contain any text; what can I do to allow blank input to trigger the event?
It is not just the onchange event, I tried assigning others such as keyup() etc. with the same results (fully functional except for blank input).
Clarification:
by no input, i mean '' (no characters)
an input of ' ' triggers still.
I remember encountering this before briefly, but some arbitrary changed resolved it.
In its simplest form, jQuery's .change() function should fire for a null input. See this simple example, by entering text in the input, clearing it and tabbing out again: simple .change() demo
$('#search').change(function(event){alert('Changed!');});
If you could provide more context to your code, maybe we could figure out what's causing .change() to fail.
as far as I know, "input" is not the event you want to use. Since "input" is analogous to "change", it tends to produce a bad result when your string approaches 0 chars, use keyup instead
Try this:
$('#form_id').bind('keyup', function (e) {
Dajaxice.appname.description_form(Dajax.process,
{'form':$('#form').serialize(true),
'pk':$('#parent_div').attr('pk')}
)
});
I want to know if it's possible to select a textarea's content when it gets modified. In jQuery, I'd do the following:
$("texarea").on("change", function (e) {
$(this).select(); // the content gets selected for copy/cut operations
});
I know it's a bad practice to directly manipulate DOM elements from within an angular controller, so if you know how I can do this cleanly, I'd be happy to learn how!
I think you can do the following, attach an event handler to your textfield element using onblur and onfocus attributes. Write two functions for each as follows:
onfocus get the initial content of the textfield
onblur get the final content and compare to the initial content if there is a difference the run the select function
If you want it to be in real time your could also use onkeyup and onkeydown
I have an input field with id myinput , and have change event bind to this field through,
$("input#myinput").change(function(){
alert("the value is changed");
}
But the handler is not getting called, if I change the value through javascript
$("input#myinput").val(text);
But, it works if I enter the input through keyboard.
so, it seems like I am binding to wrong event. What should I do to bind to both keyboard input and JS value update (jQuery val() here).
thanks.
change is triggered only by user events. With jQuery you can use trigger('change') to trigger the change event programatically.
JS Fiddle demo.
I want to call user defined function, once <textarea> attribute values changes.
Attributes like height, width and val() of <textarea> i.e. on content change.
Your suggestion are welcome!!!
Regards,
-Pravin
What you likely want is the change and keyup and paste events, like this:
$("textarea").bind("change keyup paste", function() {
//this executes when the value changes
});
Textareas support a change event which fires when the focus leaves the element after the content has changed as well as keyup/down/press events.
You can't reliably detect a change that is triggered by JavaScript, so call whatever functions you would call on change in whatever function makes the change.
http://jsfiddle.net/qhysQ/1
This changes on keyup, if you wish to perform a function when the textarea loses focus, change 'keyup' to 'change.'