How do you keep the backspace key from triggering onkeyup event? - javascript

Is it possible to have an onkeyup event for a text box that will not be triggered when pressing the backspace key? I mean, it will still delete the text but won't trigger an alert when pressed.
Edit: Sorry, I should have provided more information. I have a function with an alert that goes off when the wrong number is input in a text field.
It works, but when I go to delete the wrong number to enter a new one, hitting backspace causes the alert to appear.

In your onKeyUp function you can check the keycode to see if if the key was a backspace or not. The backspace keycode is 8. If its a backspace, then do nothing. Else, execute the rest of your code.
if (event.keycode === 8) {
return;
}
execute rest of your code

Related

Avoid button getting called with space/enter

I'm having some buttons that can be clicked either by mouse or key presses. Then I have a function called by space-key.
The problem is that when one of the buttons has been clicked with mouse, it seems the button gets selected (focussed) and when the space-key (and enter-key) gets pressed afterwards, the browser calls the selected (focussed) button instead of the intended function for the space key.
I've found a solution long time ago so I know there is a solution but can't remember.
Edit: This is not inside a form.
If you don't need the spacebar for your form, you can do an event.preventDefaut() on keypress for the spacebar.
$(yourbuttonelements).keydown(function(e) {
var kc = e.keyCode;
if (kc === 32){
e.preventDefault();
}
});
If you wish to bypass the default event on a keypress, you need to first delegate a 'keypress' or related event and then check for event.which to find the corresponding key pressed and if it matches with what you want to prevent, you can either do return false; or do event.preventDefault();
Example :
$('button').on('keypress',function(e)
{
if(e.which == 32) // 32 -> represents the keycode of space bar
e.preventDefault();
});
preventDefault() didn't work though I found a solution.
As mentioned, the problem was the button got focussed when clicked, so I used blur() for the button.
document.getElementById(id).blur();

How to disable the enter button from triggering the onkeyup event?

In my asp.net solution, I have a text input box and a search button. There is a onkeyup jquery event on the text input field so it automatically clicks the search button when the user presses a key. You can also manually click the button.
But what I noticed is that if you are typing, and then you press ENTER key, it will trigger the on onkeyup event. How can I disable the function from occurring if the ENTER key was pressed, or maybe detect if it was the ENTER key and then have an if statement or something.
Another thing that is happening is, if there is something wrong with the text in the input box, I display an alert message box. Then if you press ENTER to close the box, it will somehow trigger the onkeyup event, which displays the alert box again...
Thanks.
add if (evt.keyCode != 13) in front of all actions in the function :)
You can use .which on the event to determine the KeyCode for the key that was pressed (ENTER = 13):
$('#input').keyup(function(event) {
if(event.which == 13)
{
//respond to enter keypress
}
});
Also you can use this site to easily find info about keyups/downs etc for different keys.
Hope this helps!
Hope this helps.
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
The onkeyup event is triggered after an alert when you close it with ENTER because the alert is close onkeydown, and so after it's closed and the document regains focus, when you release the key, the textbox's onkeyup event will be triggered.
As previously stated, you can add an if (event.keyCode != 13) to test if the ENTER key is not the key that was pressed.
A better solution would be to use a different event.
Instead of onkeyup, use oninput.
The oninput event is triggered when the user changes the textbox's value.
The event will fire only when the user writes something in the textbox or deletes something. It will not go off when the ENTER key is pressed, or when any other key that doesn't change the textbox's value (like arrow keys) is pressed.
The oninput event might be a better choice for the functionality you're searching for.
*if you're using the oninput event you don't need the if mentioned before.
A fiddle for demonstration of the oninput event: Here
For future reference I found this useful site:
http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Good luck!

javascript key detection not adding latest character

so I basically have a function that detects the key that the user presses, and it submits a form whenever the user hits the space bar (don't ask why). Here is my javascript:
document.addEventListener('keydown', function(e){
if(e.keyCode === 32) {
setTimeout("submit()",1);
}
})
so the form submission works, and the fields are sent to the database. there's supposed to be a space in the end of the string that it submitted, obviously because the user hit the space bar to submit, but the doesnt show up in the end of the string when it is displayed.
The difference between keydown and keyup events is that keydown fires before adding the pressed letter to the content and keyup is fired after it.
If you want the last space to be added too, try binding on keyup.
Reference: http://www.quirksmode.org/dom/events/keys.html

javascript backspace and preventing back button while still giving backspace meaning for keypress

My App will allow people to write in a canvas, so I have attached a event listener to the keypress key, this fires the following function:
var Keypress = function(event) {
if (event.keyCode == 8) {
chatRoom.removeLetter();
event.preventDefault();
}
if(event.keyCode == 13){
chatRoom.newLine();
}
chatRoom.addText(event.charCode,"White");
}
the issue is this, currently if someone hits backspace 1 character can get deleted then, backspace gets frozen and can not be used again until another key is pressed. However is what I am looking for is for backspace to be able to be hit many times, many characters get deleted and no one ends up going back a page.
In essense I am trying to find a way for the function to fire the removeLetter() event and just disable going back on the browser, However all examples I have seen ever freeze up the backspace (leading to this one letter can be deleted) or do not work (return false would just not work at all for me).
The problem is that you're writing the backspace 'character' to you chatroom. Thus, when you press backspace the second time, you're just deleting that backspace character, and then rewriting it.
Try returning after removing your letter:
if (event.keyCode == 8) {
chatRoom.removeLetter();
event.preventDefault();
return;
}

In JavaScript, how do I handle backspace and delete key presses to perform its key function as well as extra stuff?

I have a text box where I would like to be able to press the backspace or delete key in it, and have these key presses perform their relevant function, i.e., have the character next to the cursor removed, but in addition I would like extra stuff to be done on those keep press events as well.
My solution so far involved calling a function that checks for the backspace or delete keyCode on the onKeyDown event, but the problem is once it handles the extra stuff I want done associated with those key presses, it does not actually perform the key functionality of removing the characters in the text box. A code example is shown below. This gives the effect that the keys don't work to the user when they are making edits in the text box.
function foo(obj)
{
// if key is backspace or delete ...
if ((event.keyCode == 8 || event.keyCode == 46))
{
// do extra stuff here.
}
}
I was wondering if there is a way of triggering the backspace or delete key functionality without having to determining the cursor position and manipulating the strings in the text box (and not involving jQuery in solution)?
It seems that I was calling an existing function, written by someone else, and in that function it had the following code in it:
event.returnValue = false;
Apparently, this property seems to prohibit the default action connected to the event.

Categories

Resources