is there a way to implement a text change event to detect text change on an HTML input text field? It's possible to simulate these using key events (key press etc), however, it's really not performant and difficult, is there a better way?
onChange doesn't fire until you lose focus later. If you want to be really strict with instantaneous changes of all sorts, use:
<input
type = "text"
onchange = "myHandler();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
/>
When I'm doing something like this I use the onKeyUp event.
<script type="text/javascript">
function bar() {
//do stuff
}
<input type="text" name="foo" onKeyUp="return bar()" />
but if you don't want to use an HTML event you could try to use jQuerys .change() method
$('.target').change(function() {
//do stuff
});
in this example, the input would have to have a class "target"
if you're going to have multiple text boxes that you want to have done the same thing when their text is changed and you need their data then you could do this:
$('.target').change(function(event) {
//do stuff with the "event" object as the object that called the method
)};
that way you can use the same code, for multiple text boxes using the same class without having to rewrite any code.
Well unless I misunderstand you can just use the onChange attribute:
<input type="text" onChange="return bar()">
Note: in FF 3 (at least) this is not called until some the user has confirmed they are changed either by clicking away from the element, clicking enter, or other.
I used this line to listen for input events from javascript.
It is useful because it listens for text change and text pasted events.
myElement.addEventListener('input', e => { myEvent() });
Use the oninput event
<input type="text" oninput="myFunction();" />
Related
I have an
<input id="myTextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props="value: at(model, myValue)" />
When I try to copy the value from model.myValue to another input (e.g. by
window.setInterval(
function() { document.getElementById("theOtherInput").value = model.myValue; }, 1000);
I notice, that the value of myTextBox isn't synchronized with model.myValue until the <input> of myTextBox lost focus. I.e. - theOtherInput won't be updated unless I leave the input field myTextBox.
How to force dojo to synchronize the input with the bound variable with every keystroke? I thought that this should have been the default behavior or at least it should be possible with little effort, but I don't find the right attribute to do it. Any ideas?
The main problem for me is, when I submit the form by the enter key, the model.myValue has still the value before the input myTextBox got the focus. (and I don't want a hack with setInterval - I just want to have dojo doing its job of synchronizing the input with the model)
The closest you can get is setting intermediateChanges property to true and attach an onChange event. Something like this:
<input id="myTextBox" data-dojo-type="dijit/form/TextBox"
data-dojo-props="intermediateChanges: true"
data-dojo-attach-event="onChange: _myOnChange"
data-dojo-props="value: at(model, myValue)" />
Now, inside your widget, the _myOnChange function will run with each valuable keystroke or if the content is changed.
_myOnChange: function(newValue){
console.log(newValue);
document.getElementById("theOtherInput").value = newValue;
}
This is a input label,
<input type="text" (blur) = "obj.action"/>
the obj is a object from corresponding component, obj.action = preCheck($event), preCheck(input: any) { code ....} is a function in the same component, could it works if i code like this?
My purpose is to distinguish which input need this event, because there are few input use the same template, i want to use attr action to ensure which one need this event.
There is just one small mistake in this code, you didn't add the parentheses "()" when adding "obj.action" as the blur event handler. So the corrected code is :-
<input type="text" (blur) = "obj.action()"/>
I'm trying to use jQuery geocomplete along with Vue.js to populate a form with geo data.
My code contains this form:
<form>
<label for="get-offer-location">location: </label><input id="get-offer-location" v-model="newoffer.location" type="text"/>
<div style="visibility:hidden">
<input name="lat" type="text" value=""/>
<input name="lng" type="text" value=""/>
</div>
</form>
After I click on a suggested location from the get-offer-location input, it looks like the field is filled out -- but then when I start typing in another field, the location input field reverts to just the letters I typed in for the location search. Try it out here by clicking "post", then "news" or "offers":
https://jsfiddle.net/dvdgdnjsph/157w6tk8/
Can anyone tell me what's wrong?
The problem you are having is that v-model binds on input, since the geolocation dropdown is a plugin that changes the value programatically the input event is not fired, so v-model is not updated. As a case, try typing a space after selecting a location, you will see that it sticks.
Fortunately, v-model is nothing more than syntactic sugar for v-on:input, so you can use v-on to fire your event instead. Considering that you are going to need to unfocus to get out of the box, the blur event is likely to be your best option, so you can simply do:
v-on:blur="newarticle.location = $event.target.value"
Unfortunately, JSFiddle won't let me save or update your Fiddle, but I did get it working with the code above.
For completeness, in case you want to use this behavior extensively, and because the Vue docs are fairly limited in this regard, you may write a custom directive to encapsulate the code:
Vue.directive('model-blur', {
bind: function(el, binding, vnode) {
el.addEventListener('blur', function() {
vnode.context[binding.expression] = el.value;
});
}
});
Then you can use like so:
<input v-model-blur="myVar" />
Here's the JSFiddle: https://jsfiddle.net/4vp6Lvmc/
Can't tell for sure. But it looks like jQuery plugin just changes input#get-article-location value, but not the Vue model. So when you trigger model update (e.g. editing headline) it overwrites complete location with whatever you typed in.
I have something like this for catch the geocomplete event and try to set the vueJS value :
$("#get-article-location")
.geocomplete({details: ".details"})
.bind("geocode:result", function (event, result) {
vm.newoffer.location = result.formatted_address;
console.log('done');
});
But something still appears wrong, I think you should really change the name of your vueJS instance (var vm) it may be use by another script and make troubles.
This is because v-model, as two-way binding, on the receiving-user-input way, listens to the input event on the input element, while js plugins (like jquery-geocomplete) obviously set input values via js, which leads to the view model's data not changing as we discussed in other answers.
To fix this, just listen to the geocode:result event of the plugin and manually change the data with code (there seems to be something wrong with jsfiddle so I'm posting it here):
var vueVM = this;
$("#get-offer-location").geocomplete({ details: ".details" });
$("#get-article-location")
.geocomplete({ details: ".details" })
/***** highlight start *****/
.bind("geocode:result", function(event, result){
console.log(result);
//tried result.something but couldn't find the the same thing as `this.value`
vueVM.newarticle.location = this.value;
});
/***** highlight end *****/
extra knowledge: the mechanism of v-model stated above is usually used in making reusable components, by receiving a value prop from the parent, and emitting an input event with the user-input value when detecting change on the input element in the component. And then we can use <my-component v-model='parentData'></my-component> as the child behaves exactly like a simple input element from the parent's perspective. example
I have a page with the following markup:
<input type="checkbox" onclick="this.form.hiddenField.value=(this.checked?'Y':'N');">
<input type="hidden" name="hiddenField" value="N">
Pretty straight forward. A checkbox places 'Y' or 'N' in a hidden input when it's clicked.
In a js script I'm adding a "change" event listener like so (I left out some x-browser stuff):
myHiddenElement.addEventListener("change", function(e){
//do something
};
Since the hidden element is being changed programmatically, its onchange event does not fire. I thought adding this.form.hiddenField.onchange(); to the onclick of the checkbox would do the trick, but it does not.
Since I'm using element.addEventListener, the element.onchange is undefined.
How can I fire the change event for events added using addEventListener?
In modern browsers you could do:
input.dispatchEvent( new CustomEvent( "change" ) );
More simple way would be this:
function changeHandler(){
// whatever
}
input.addEventListener( "change", changeHandler, false );
...
changeHandler.call( input );
This is assuming that you don't need the event object in the handler, and typically for onchange you don't.
Another alternative is, of course to use something like jQ... (well, you know that word :) )
Yet another solution is to give a name and value to the checkbox itself and get rid of the hidden input. Checkboxes have been handled without any Javascript for years.
I think relying on the onchange of the hidden field is the less reliable option. The onchange event of hidden and text inputs is not as straightforward as you would think. (For instance, the onchange of a text field fires after the text field loses focus, not while you are typing Fiddle) It would be better to rely on the onclick or onchange of the checkbox.
JS
function checkChange(cb) {
if (cb.checked) {
cb.form.hiddenField.value = "Y";
//do checked stuff
} else {
cb.form.hiddenField.value = "N";
//do unchecked stuff
}
}
HTML
<input type="checkbox" onclick="checkChange(this)" />
<input type="hidden" name="hiddenField" value="N" />
I have a simple task which I'm failing at.
I want to take this field:
<input id="amount" name="amount" value="{$formRefill.amount}" class="textInput auto required validateNumber" type="text">
And once the user has typed a value in there (i.e. 950.50), and they click outside of text field (focus somewhere else), jQuery takes this field and displays it somewhere else on the page.
I was trying to do this inside of a DIV lower down the page.
Thanks.
You need to use change event of the input field:
$('#amount').change(function() {
$('#mydivid').text($(this).val());
});
Code: http://jsfiddle.net/yg9gF/2/
you should use keyup which will update the div on every char entered.
$('#amount').on('keyup',function() {
$('#mydiv').text($(this).val());
});
fiddle : http://jsfiddle.net/yg9gF/11/
you can use the blur() or the change() event. Use change if you want the value to copy only when it has been changed, or blur if you want it to copy regardless.
$('#myText').blur(function () {
$('#myDiv').text($(this).val());
});
http://jsfiddle.net/AAyyq/