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
Related
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
I have an auto-complete box where user can choose between results with arrow keys while the input element is in focus. when the user uses up and down arrows, the insertion point jumps between the start and the end of the text. How can I prevent this from happening? I tried the following but it does not work:
$("#Hdr_nav_search_input").keypress(function(event){
if(event.which==38 || event.which==40){
event.preventDefault();
}
})
$("#Hdr_nav_search_input").keydown(function(e){
if(e.which==38 || e.which==40){
e.preventDefault();
}
});
Try the above code. You are handling the event very late. To prevent the default behavior, you need to handle the KeyDown event and special keys don't trigger keypress in the first place as far as I know.
Use keydown event instead of key press.
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;
}
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.
This is driving me nuts. Its a tough one to explain but I'll have a go.
I have one input text field on the front page of my site. I have coded a keydown event observer which checks the keyCode and if its ENTER (or equiv), itll check the input value (email). If the email is valid and unique in the DB itll submit the form. Basic stuff, or so you would think.
If I type my email address in the field and hit enter, it works fine in all browsers. However, if I type the first couple of letters, and then use the arrow keys to select the email from the history dropdown box (hope you know what I mean here), and then press enter the result is different. The value of the form field is being captured as just the couple of letters I typed, and therefore the validation is failing. It seems that when I press the enter key to "select" the email from the history dropdown, the browser is interrupting that as if I was typing.
In Chrome and Safari it works as it should. As it should means that when you press enter to "select" the email from the history dropdown, all it does is puts that email address into the text box. Only on the second ENTER key press does it then trigger the event observer, and the email is validated.
Hope somebody can shed some light on why this is happening... My gut feeling is its a browser thing and will be something I cant fix.
Thanks
Lee
EDIT:
To add clarification to my question let me add that Im using the "keydown" event to capture the moment when the enter key is pressed. I have tried the "keyup" event and this solved my problem above, but then I cant seem to stop the form submitting by itself. The "keyup" event triggers AFTER the default behaviour, therefore its not the right choice for this.
FURTHER EDIT:
Thank you again, and btw, your English is excellent (in response to your comment about bad English).
I have changed my event handler from this:
$("emailInputBox").observe("keydown", function(event) {
return submitViaEnter(event, submitSignupFormOne);
});
to this:
$("emailInputBox").observe("keydown", function(event) {
setTimeout(submitViaEnter.curry(event, submitSignupFormOne),0);
});
submitViaEnter:
function submitViaEnter(event, callback) {
var code = event.keyCode;
if (code == Event.KEY_RETURN) {
event.stop();
return callback(event);
}
return true;
}
Seems to work but the problem now is that the browser is permitted to carry out the default action before running the submitViaEnter function which means the form is being submitted when I hit ENTER.
Answer to the original question
Yeah, it's a Gecko bug (not Mac-specific though).
The last part of this comment contains the description of the work-around: use the time-out.
[edit] since you asked for the clarification of the bug
When you press Enter and the auto-complete is active, Firefox (erroneously) first fires the page's key handler, then the browser's internal key handler that closes the autocomplete popup and updates the text area value, while it arguably should just fire it at the autocomplete popup and only let the page know the textbox value changed.
This means that when your key handler is called, the autocomplete's handler hasn't run yet -- the autocomplete popup is still open and the textbox value is like it was just before the auto-completion happened.
When you add a setTimeout call to your key handler you're saying to the browser "hey, run this function right after you finished doing stuff already in your P1 to-do list". So the autocomplete's handler runs, since it's already in the to-do list, then the code you put on a time-out runs -- when the autocomplete popup is already closed and the textbox's value updated.
[edit] answering the question in "Further edit"
Right. You need to cancel the default action in the event handler, not in the timeout, if you want it to work:
function onKeyPress(ev) {
if (... enter pressed ...) {
setTimeout(function() {
... check the new textbox value after letting autocomplete work ...
}, 0);
// but cancel the default behavior (submitting the form) directly in the event listener
ev.preventDefault();
return false;
}
}
If you still wanted to submit the form on Enter, it would be a more interesting exercise, but it doesn't seem you do.
ok sorted it. Thanks so much for your help. It was the curry function that I was missing before. I was trying to work on the event inside the scope of the setTimeout function.
This works below. The submitViaEnter is called from the eventobserver and responds to the keyDown event:
function submitViaEnter(event, callback) {
var code = event.keyCode;
if (code == Event.KEY_RETURN) {
event.stop();
setTimeout(callback.curry(event),0);
// return callback(event);
// return false;
}
return true;
}
Stopping the default action inside the eventObserver meant that no characters could be typed. So I stuck inside the if ENTER key clause.