Have you seen facebook comment box? I am trying to make a very similar comment box with textareas. for that I have many forms in my page beneath "wall posts". Each form has a class of comment-form and inside that form I have textarea for comment. each of those textarea has a class of comment-textarea.
I want to submit a comment on enter. for that I have a javascript
$('.comment-textarea').keypress(function(e){
if(e.which == 13 && e.shiftKey){
} else if(e.which == 13){
e.preventDefault();
$('.comment-form').trigger('submit');
}
});
but since i have many forms in the page, I don't know how to submit the form which is on focus.
There 2 solutions. Solution 1 give every form a unique ID so you can target it. Use the comment-textarea to find the form like this :
$('.comment-textarea').keypress(function(e){
if(e.which == 13 && e.shiftKey){
} else if(e.which == 13){
e.preventDefault();
$(this).closest('.comment-form').trigger('submit');
}
});
This will find the first parent with the class "comment-form"
You could use .closest():
$(this).closest('.comment-form').trigger('submit');
The function .closest() goes up one level (like .parent()) to see if the class .comment-form exists there, and if it doesn't find it, it repeats the process another level up, and again and again until it finds something (if there's anything to find at all).
Related
I have been struggling with this for a couple of days. I am pretty sure it's something simple, but I just can't see it.
On this page there is a form that users can use to send a message. Click on the grey Contact icon to see it.
The form used to work fine, but now I cannot type into any fields. Selecting an autocomplete value works though.
I have tried disabling some Javascript, adding a z-index value to the fields, but to no avail.
Can someone please take a look and tell me what might be the problem?
Thanks in advance.
You are too eager to restrict the user..
This code is the problem:
$(document).keydown(function(e){
if (e.keyCode == 39) {
//(...)
toggleArrows();
}
return false;
});
If the button IS NOT keyCode 39, you deny the button functionality.
Just remove the return false and your problem will be gone.
Edit: I just noticed you have 2 keydown events, one checking for keycode 37 and one for 39. Don't do that! You should do it this way:
$(document).keydown(function(e){
if (e.keyCode == 39) {
//(...)
}
else if (e.keyCode == 37) {
//(...)
}
});
And, again, get rid of the return false;.
JSFiddle to show the result: http://jsfiddle.net/xr2stb0k/
First checkbox is restricted with return false (except for the letter "a"), second one isn't.
I'm having an issue with one of my main templates in umbraco.
The issue is that, whenever I'm logged in on my website and I hit the 'enter' key whilst focus is on an input label, I'm logged out and redirected to my startpage.
I know that the event.preventDefault() method will stop this, but I cannot figure out how to apply it in my scenario.
Is it possible to add a script to my Umbraco template that adds the "preventDefault()" in case of keyCode == 13 (the enter key)? And if so, how exactly?
I have a bunch of labels in all kinds of macros that uses this template, and I would very much prefer not to add these lines manually for each of them!
I have tried quite a lot of variation of the following, but without any luck:
$("input").click(function(e)
{
if(e.keyCode == 13) {
preventDefault();
}
});
Thank you for your time.
You check the keyCode on a click, that won't work. Also, the preventDefault() should be used on the event: e.preventDefault().
Use this instead for global enter key:
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
i have written a code :
$('*').on('keyup',function(e){
if(e.keyCode == 13){
$(this).trigger('click');
}
});
the above code works fine until jquery dialog. Apparently whenever i hit an enter key in the dialog. it sort of like bubbles up the event.
i have 2 dialogs. 1st is the confirm dialog and 2nd is the message dialog. when i hit yes it will pop up the message dialog and when i hit ok on the message dialog the confirm dialog will open again.
i tried like this :
$('*').not('.ui-button').on('keyup',function(e){
if(e.keyCode == 13){
$(this).trigger('click');
}
});
this is for the exclusion of the ui-buttons for the enter events. it did not work. Any help would be appreciated. thanks
EDIT :
note that i call the dialogs to open using a link. i wonder if that link is focused when i hit enter so it calls the dialog again when i hit enter on the message dialog.
Why not cancel its event by using off?
$('*').on('keyup',function(e){
if(e.keyCode == 13){
$(this).trigger('click');
}
}).find(".ui-buttons").off('keyup'); // this unbinds the event so it won't trigger
It might be that the ui buttons are not created when the handlers are registered.
One approach you can do is to register a single handler to the document object, then see whether the actual target is a ui-button like
$(document).on('keyup', function (e) {
var $target = $(e.target);
if ($target.closest('.ui-button').length) {
return;
}
if (e.keyCode == 13) {
$target.trigger('click');
}
});
use this code, this code exclude .ui-button element and inner elements of .ui-button class
$('body').on('keyup',function(e){
if(!$(e.target).closest('.ui-button').length && e.keyCode == 13){
$(e.target).trigger('click');
}
});
I admit I'm not a big fan of global bindings, especially because of these problems. I find it better to specify the types and/or location of the elements I want to bind the event to.
One of the reasons is this event bubbling that sadly does not behave the same way in all browsers.
My suggestion is to bind the event only to the desired elements and add e.stopPropagation() to the called function(s).
I know this is not the answer you were looking for but I believe you should consider this method for being more specific (and more reliable).
I fixed the problem by blurring the link that i clicked to open the dialog.
something like :
$('.links').find('a').on('click',function(){
$(this).blur();
});
I've got a bit of jQuery to suppress a carriage return when customers are filling out our forms:
$('form.eForm:not(.suppress-submit-on-enter-key-disabled) :not(:button, :submit)').keypress(function(e){
if(e.which == 13){
// Cancel submit event
e.preventDefault();
// Give focus to next input element
$(':input').eq($(this).index(':input') + 1).focus();
}
});
However, it has also managed to suppress the carriage returns on our Comment boxes.
It seemed simple enough to add a textarea checker like the existing code has to check for :not (:button, :submit):
$('form.eForm:not(.suppress-submit-on-enter-key-disabled) :not(:button, :submit, :textarea)').keypress(function(e){
if(e.which == 13){
// Cancel submit event
e.preventDefault();
// Give focus to next input element
$(':input').eq($(this).index(':input') + 1).focus();
}
});
Whoops! :not (:button, :submit, :textarea) didn't work, because it seems that textarea is not defined for this part of jQuery.
How do others detect these TextArea controls?
Update:
One of the people who posted an answer on here turned out to have the solution.
The eForm class that all of our forms are generated from was somehow catching this.
It took my manager and I a couple of hours hammering on this to get it resolved, but in the end all I needed to do was to only handle events from an Input control.
Here is our end result:
$('form.eForm:not(.suppress-submit-on-enter-key-disabled) :input:not(:button, :submit, textarea)').keypress(function (e) {
if(e.which == 13){
// Cancel submit event
e.preventDefault();
// Give focus to next input element
$(':input').eq($(this).index(':input') + 1).focus();
}
});
Special thanks to Khawer Zeshan for providing that Fiddle. It proved to me that there was something deeper wrong with my code.
Why dont you use id for single textarea and class name for multiple selectors?
For only one textarea:
$('#textareaid').keypress(function(e){
if(e.which == 13){
// Cancel submit event
e.preventDefault();
// Give focus to next input element
$(':input').eq($(this).index(':input') + 1).focus();
}
});
For multiple fields use the class name and apply the same class for those fields:
$('.textareaClass').keypress(function(e){
if(e.which == 13){
// Cancel submit event
e.preventDefault();
// Give focus to next input element
$(':input').eq($(this).index(':input') + 1).focus();
}
});
FIDDLE
I recently had the same concern in mind, and created this very simple jQuery plugin for it
https://github.com/aymanrb/jquery-tabable-required
I had a simple script that when you pressed C you'd be redirected to a different page, same for other letters.
However, every time you would press the button this would happen, even if you were typing text into an input text field.
Can anyone write a lightweight script to allow me to make multiple hotkeys without them working in input fields or can show me where I can find documented explanations for this?
Okay, so I have the hotkey working, just can't make it stop.
$("input.registerform").keypress(function(e){
e.stopPropagation();
});
Here is what I have to make it stop, the class of my input form is registerform bgcolor2 but it won't work with input.registerform, nor with input.registerform bgcolor2.
I tried adding an ID to it with registerform as ID; didn't work either :/
Is it being caused by my AJAX? or am I missing something here?
Try this
$(document).keypress(function(e){
if(e.which == 13){
//Enter key is press do what you want
}
else if(e.which == 67 || e.which == 99){
//C key is press do what you want
//window.location.href = "urlToRedirect";
alert("C pressed");
}
else if(e.which == 32){
alert("Space pressed");
}
//Similarly check for as many conditions you want for different keys(ascii code)
});
//To supress this behavior do not happen in input field stop the event propagation
$("input").keypress(function(e){
//code goes here
e.stopPropagation();
});