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.
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'm trying to catch the value of an input element every time its value changed. change requires blurring the element so it is not good for my case. I came across this Javascript change event on input element fires on only losing focus question and the accepted answer solved my problem, partly. According to the fiddle the event I should be watching is
$('#name').bind('DOMAttrModified textInput input change keypress paste focus', function () {
.....
})
However it doesn't work so well with characters that require an input method to input. For example, to input Chinese character "é·", I'd press "c","h","a","n",āgā and then "space", all these keystrokes are recorded and will fire the events unwantedly - I only want to catch "é·" as the input value, and the trigger should only fire when this character appears in the input textbox.
I've tried different combinations of the events, but none of them works. Is there any way to work this around?
This question already has answers here:
onkeyup and onfocusout is not working in jQuery Validate
(1 answer)
jQuery validate plugin: validate on blur() by default
(1 answer)
Closed 5 years ago.
I'm making a "contact me" page, with jQuery validation. My main content box is reloaded with ajax to change content when the user clicks on a new page. The problem I'm having now is to bind an event handler for the validate function. what I got now is
$(document).ready(function(){
$('body').bind('focus focusout keyup', function() {
$('#contact_me').validate({
But it's not working like intended. I have to start typing, then click out of the input field and then click on it again before it starts to validate the input field value. I want it to validate on focus, focusout and keyup. I think the problem is with the event handler somehow. Any suggestions?
Here is a JSfiddle with the script: https://jsfiddle.net/z6h9d028/4/
I can see now that the eventhandler is not the problem. When i type in a input field its not validating the value until i click out of the box. After the first validation i works on keyup as well. How can i get i to work on keyup stright away?
Edit 2:
Updated fiddle: https://jsfiddle.net/z6h9d028/7/
It's almost working now! I just need to get all the error messages to show when clicking the submit button. And to find a way to show the error message when you type one character and then remove it if the input field is required (it does show it if you type once, then remove, type again and remove. but not the first time)
You don't need to set your own event listeners, or at least if you do, you shouldn't be using them on the .validate() method (see alternative method below).
Remove the whole $('body').bind() part, and add the following to your validate settings object:
onkeyup: function(element) {
$(element).valid();
// As sparky mentions, this could cause infinite loops, should be this:
// this.element(element);
},
This should be better too, as it may give you some extra freedom as to how you handle the onkeyup events, such as adding a setTimeout if you don't want it to be instantaneous.
Fiddle: https://jsfiddle.net/z6h9d028/5/
Inside the onkeyup, you can also call $('#contact_me').valid(), which will revalidate the whole form, although that may not be your desired outcome.
Edit: Sparky also helpfully mentioned that jquery-validate by default does allow keyup events, but it only does so after the first submit: jQuery validate plugin: validate on blur() by default
An alternative way would be to set the details of your validation as you currently are, without the onkeyup function, then set your own listeners and run $(element).valid():
$('#contact_me').validate({
rules: {
// ...
}
});
$('input').on('focus focusout keyup', function () {
$(this).valid();
});
Edit regarding your other issues:
Your errorPlacement function is doing some funky things. How it decides what is the next sibling or not seems to be working incorrectly. Also, you're adding the error HTML divs into your DOM manually, but they are actually generated by the plugin. So really, you're creating both, then trying to show them, kinda over-riding the plugin, kinda not, and the whole thing is going into a frenzy.
The solution is, I reckon, to remove those error divs, remove that errorPlacement function, and then modify the CSS selectors to get any id ending with "-error", which is what the plugin generates. So [id$='-error'] instead of .error_message
https://jsfiddle.net/z6h9d028/8/
I am looking for a way to bind a function to a text box that executes when the text of the text box changed. I want to avoid the use of keyup or keypress, and other similar things. I don't want it to fire when I lose focus of it, just when the text changes. This needs to definitely work in IE browsers, and preferably work in other browsers.
Does anyone know which is the event to do this?
Thanks.
You might be able to try a setTimeout handler that just checks the value of that textbox every so often and will detect when it changes by comparing the current value to the last value.
I see that you've found a workaround but I just wanted to offer this anyways. Much more granular control.
$('#searchbox').on('keyup, keydown, change', function(e) {
if(e.keyCode!= 9 || e.keyCode!= 16 || e.keyCode!= 17 || e.keyCode!= 18){
//Find keys that you don't want triggering your event and add them in the IF statement above
//http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
//Put code here that calls AJAX
}
});
Strange phenomenon detected with JQuery 1.4.4 for FireF, Chrome, Safari (IE untestested).
Aim: update a list while the user types a filter value into a simple, basic text-input-box.
Solution: bound keyup event, read out the value of the input-field, apply the filter... roughly:
$("#myinputfield").keyup(function(e) { myList.filter($(this).val()) });
it works perfectly for both typing and deleting EXCEPT for when deleting (del or backspace same effect) the last remaining (==first) char. in that case the event does not fire at all.
Anybody with an idea on what the problem is and/or how to solve it?
(p.s.: My solution would be to change from keyup event binding to a setTimeout periodical check as long as the input-field has focus, but that koxind of feels like a dirty escape...)
I cannot reproduce your problem. Perhaps it is just that your filter function does not handle $(this).val() == '' very well. Check out this quick test.