I'm working on #mention feature and need to load list of users that start with entered character in an input text field .
The problem is with Spanish character like (íáúóé).
in my code I use keypress and keydown to detect characters but in Spanish the keypress event doesn't fire .
in order to type the "á" user need to press two keys
first one is "´" and second is "a" ,then we got "á".
in keydown event using the method String.fromCharCode(e.which || e.keyCode) on this key"´" return "å"
The question how to catch this scenario?
Thanks
Related
I have a text field for user input, but only allows a limited character set. Blocking keyboard characters works fine using keydown to first vet the keystroke, then event.preventDefault() if it doesn't pass.
Windows has an Emoji menu which can be activated by WIN+Period or right click. The menu allows the user to click on Emoji icons and have them inserted into the text field.
This event can be captured via Input and the character is shown in event.data for vetting. What I cannot resolve though is how to block the action event.preventDefault() does not stop this.
Here's an example of the type of code I've tried.
textbox.addEventListener( "input", event => {
if ( event.data === BAD ) {
event.preventDefault();
}
}, false);
Digging into the event data I see that cancelable is false, whereas for keydown it's true.
Is there a perhaps another event other than input to capture this is earlier?
Based on #CoryCoolguy's suggestion one solution is to remove characters from the text field after they're entered by checking the contents of the field.
This solution uses a regex validator to locate any characters that are not part of a valid set, then replace them with a blank character.
textbox.addEventListener( "input", event => {
textbox.value = textbox.value.replace( /[^a-zA-Z0-9 ]/gm, '');
}, false);
textbox.addEventListener( "paste", event => {
textbox.value = textbox.value.replace( /[^a-zA-Z0-9 ]/gm, '');
}, false);
Using the input event, each time a character is typed or inserted via the Windows Emoji panel the value of the text box is scanned and any characters not matching the regex is removed.
Adding a paste event listener will monitor anything pasted from the clipboard and will allow the contents to be pasted before removing any unwanted characters. This means that if there's a mix of valid and non-valid character in the clipboard, then the valid ones will still get pasted.
I have been trying to deal with getting the last input in to a text field on an Android app from Javascript.
I was originally trying to use the KeyUp, KeyDown and KeyPress events to get the KeyCodes from keyboard input however with android soft keyboards you will get the KeyCode 229 for every key other than backspace, space and enter.
So now I am using the onInput event however this just seems to alert me to the fact that something has been input in to a text field and not what that input was.
document.getElementById("textarea").addEventListener("input", function (e) {
ClaroSpeak.KeyHandler(e);
}, false);
Does the input event some how let me know what the last change or key was, e.g. 'space' 'a' 'F' ect...
What about setting a 'global' variable and storing the last element in it?
I'm using jquery's function keypress for my input field
Now, let's say that I want to know when the user types a letter, if this is the first character in the field. I now use something like:
element.keypress(function(e){
//...
if(elementValue.length()==0){
//Do something
}
}
The problem is when the user selects the text that typed and then presses a key (lets say for the character 'A') that replaces it. Then this code returns the length of the old-(soon to be replaced) text.
I know that I could use keyup instead, but I think I need to stay with keypress because I have to do some checks for the pressed physical keys. (this answer really shows the difference between keyup and keypress in this case)
Any suggestions?
User Paul S. put me in the right direction...
That's what I have now and it works:
element.keypress(function(e){
//...
if(this.selectionStart==0){
//Do something
}
}
This way I detect when a key has been pressed while the caret was just at the beginning of the field.
So I've got this textarea which listens for Enter keypress event. But I only want it to respond to the Enter key being pressed on the number pad not the one next to the letters.
What's a method I can use?
Both keys trigger the exactly same events with the same key code (13). It's not possible to differ between them in JavaScript.
There is no different keyCode for nomal enter and enter on keypad. Its 13 in both cases
http://unixpapa.com/js/key.html
They actually do the same thing and are indistinguishable
$("#epFilter").keypress(function(){
query = $("#epFilter").val();
alert(query);
});
In this code, whenever I type in my text box, it always alert one character less. It doesn't catch the last character. Why?
Use the keyup event instead.
$("#epFilter").keyup(function(){
query = $("#epFilter").val();
alert(query);
});
keypress event is triggered when user presses a key, but before the character is inserted. Use keyup event instead.
Slightly improving Matt's answer (using this inside event handler):
$("#epFilter").keyup(function(){
query = $(this).val();
alert(query);
});
I wonder if that is a "normal" behavior. Shouldn't keypress be similar to keydown+keyup (except for the codes and keys)?
I had the same problem. I have an input-text field and I want to calculate a total on keypress. However, it does not change the total until I input again another character (this means when I entered the first digit it didn't update). I used "keyup" and was "fixed", but I think it could be better if I use keypress as it doesn't fire when I press other keys (like Ctrl, Shift, arrows, etc).
According to the documentation Keypress should work as I expected but for some reason it didn't.
This is not exactly an answer (so don't vote for it). Just my contribution.