I am learning Javascript and I would like to add multiple element to an event listener at once, I don't want to add call I know on an element for example input field I can add attribute onkeyup=myfunction(). but what I want is something similar with what I have thinking below
var keypress = [document.getElementById('field'), document.getElementById('field1')
]
keypress.forEach((element)=>{
element.addEventListener('click', myfunctionTocall);
});
function myfunctionTocall(){
doSomething()
}
How can I achieve this. I apologize for my English I am using Translator
Related
I'm using Angular, Javascript and Typescript and Ionic.
I have a function createDropdown(inputField, arrayOfItems) which will attach a dropdown to the input field being passed populating the dropdown with the array provided.
This will work as a "autocomplete" dropdown, that's why I need a add an event listener "input" so it will look something like this:
createDropdown(inputField, arrayOfItems){
inputField.addEventListener("input",()=>{
//Logic to create dropdown
});
}
The problem is that, after adding the event listener to the input field, if the user spams a key "A" for instance from the keyboard, then this creates lag or delay and eventually the app crashes. Is there a way to prevent this from happening? I have tried "keyup", and it fixes it. However, with this, pressing any key from the keyboard will trigger the createDropdown function, for example: pressing "Control" or "Alt".
The end result should be, having the user typing in an input field, then the results that match should be displayed in the dropdown so the user can select from it. The more they type, the more accurate the results become.
You could use for example setTimeout() + implementation of a spinner.
Here an example for what I mean
https://stackblitz.com/edit/how-to-trigger-an-event-in-input-text-after-i-stop-typingwritin
What you're looking for is called "debouncing input". Take a look here: https://stackoverflow.com/a/36849347/4088472
I would like to change the first letter of a word to uppercase. So, I have written some code on keyup() function.
Whenever I type inside the text filed, Word's first letter is getting changed to uppercase.
I also use autocomplete() function. The problem is, Whenever I choose a word from autocomplete drop down it's first letter is not getting changed to uppercase and also the last text box is getting auto focused.
FYI: I am triggering the keyup() function after the autocomplete selection.
jsfiddle: http://jsfiddle.net/8ke04mgs/5/
You can use change event on your textbox
$(document).on('change', 'inputBox', function() {
// Does some stuff and logs the event to the console
});
This will solve the autocomplete problem
Your current way of doing things would work perfectly if the select method you provide to the autocomplete library was called after value of the box was updated.
But it is not, it's called before and so the value that it capitalises is the old value and is immediately replaced by autocomplete anyway.
As #Alok has pointed out, you can use the 'change' event to wait a little longer.
To avoid writing out your event handler out twice, remember .on() can take multiple events, so I'd just call it on keyup and change like so
$('#element').on('keyup change', function() {
...
});
But I think in modern browsers 'change' should be enough.
I have lots of input fields using the Jquery Masked Input but I can't figure out how to capture the change of the value on the input.
I have tried:
JQuery.Change()
$('#Selector').bind('input', function () {})
But, no success.
Anyone could help me?
Do you just mean this?:
$('#Selector').change(function () {
// respond to the change
})
Or, if your elements are dynamically being added to the DOM, you might use:
$(document).on('change', '#Selector', function () {
// respond to the change
});
(You don't have to use document as the common parent element, any common parent element will work.)
Depending on the type of the input (and sometimes on the browser, unfortunately), you might try other events as well, such as keypress, keyup, even blur in some cases.
I am writing a jQuery script that needs to work with an existing unchangeable plugin. This plugin listens for text being typed into an <input type='text'> and then processes the result. I can't alter this. My script is setting the text of the input via $('#display).val(newValue); as a jQueryUI Slider is dragged. I need the plugin to recognize this value as being typed by the user so that it processes the newValue as the slider is dragged.
Can anyone point me in the write direction for this?
You probably need to 'trigger' the keyup (or keypressed?) event so that the event handler is fired.
Here is one (slightly dirty) way to do it:
var e = jQuery.Event("keyup");
e.which = 50; // # Some key code value
$("#display").trigger(e);
Note that the plugin may be looking for particular keys, and I may have guessed the event wrong.
The more sophisticated way to do it would be to track down the plugin's event handler, and then invoke it directly. FireBug may help you find it by step-through debugging. Otherwise, you can use jquery to start inspecting the input's event handlers.
var events = $('#display').data("events");
jQuery.each(events, function(key, handlerObj) {
console.log(handlerObj); // alert(handlerObj);
});
Once you've found the relevant handler, you can invoke it directly.
HTH
You have to put an Onchange listener to the text field and trigger the necessary function to listen to onchange values of the user. eg:
function func(){.....put your logic.....}
If you are looking at reading value from a text field on changing a slider, then you have to put the necessary function on the slider control.
I'm trying to determine when any of a set of named input/select/radio/checked/hidden fields in a form change.
In particular, I'd like to capture when any changes are made to fields matching jQuery's selector $("form :input"), and where that input is has a name attribute. However, the form isn't static i.e. some of the fields are dynamically added later.
My initial thought is to keep track of when new named elements matching :input are added, and then add an event handler, like this:
function on_change() {
alert("The form element with name " + $(this).attr("name") + " has changed");
}
function reg_new_e_handler(input_element) {
input_element.change(on_change);
}
However, I'm quite hopeful I can avoid this with some jQuery magic. In particular, is there a way to register an event handler in jQuery that would handle input elements that match the following:
$("form :input").filter( function () { $(this).attr("name") } ).change(on_change);
However, have this event set update whenever new input elements are added.
I've thought that it may be possible to capture keyup event on the form node with $("form").keyup(on_change), but I'm not so sure how one could capture change events.
I'd also like this to capture keyup events.
Thank you for reading.
Brian
You're looking for live events.
For example:
$(':input[name="something"]'.live('change', function(e) {
//Do things
});
Adding an event handler using .live will handle the event for all elements that match the selector, no matter when they were added.