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
Related
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();
});
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).
I have a requirement where user cannot submit the form if he press enter key unless focus will be on submit button.
Using following code, I am able to do that, but now the issue is, if I have any enter key event attached specific to any field (e.g. if I want to attach enter key event to one textfield for some special requirement), it is not allowing me due to the script I have written below..
<script>
$(document).keydown(function(event) {
if (event.keyCode == 13) {
var $focusedItem = $(document.activeElement);
if($focusedItem.is("button") || $focusedItem.is("a") || $focusedItem.attr("type") == "submit") {
$focusedItem.click();
}
else {
event.preventDefault();
}
}
});
</script>
Any solution where I can restrict user from submitting form on pressing enter key, if focus is not on the submit button but at the same time if there will be any enter key event attached to any form-field, that should also work.
If you had created a JsFiddle it would be easier to help. However, I'm thinking you should do something like this:
if($focusedItem.attr('id') == 'submitButton') {
if (event.keyCode == 13) {
submit the form
}
}else if ($focusedItem.attr('id') == 'Anothertextarea') {
if (event.keyCode == 13) {
do something special
}
}else{
if (event.keyCode == 13) {
return null;
}
}
Remove the line event.stopPropagation(); from your script, you need only the preventDefault() (prevents the submit).
When you do stopPropagation() you are stopping all other keypress events on the element.
Try that and see if it fits your needs:
--DEMO--
$(document).on('submit', 'form', function (e) {
e.preventDefault();
}).on('click', ':submit', function (e) {
if (!$(document.activeElement).is(':submit')) return;
var form = $(this).closest('form').length ? $(this).closest('form')[0] : $('#' + $(this).attr('form'))[0];
form.submit();
});
Maybe I'm missing the point, this is basically a standard html issue.
Don't give the form an submit action (move it to a click event directly on the button) and change all button types to button instead of submit.
I can't remember if simply removing the submit from the form is enough. If not then just do onSubmit="return false;" I think that does it.
However as a note the requirement for this as a global behavior is probably wrong and if its for the government then you will probably get in trouble since its not compliant with accessibility guidelines.
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();
});
i have a function that currently working on .keypress event when the user right something in the textbox it do some code, but i want the same event to be triggered also when the user clear the textbox .change doesn't help since it fires after the user change the focus to something else
Thanks
The keyup event will detect if the user has cleared the box as well (i.e. backspace raises the event but backspace does not raise the keypress event in IE)
$("#inputname").keyup(function() {
if (!this.value) {
alert('The box is empty');
}
});
jsFiddle
As Josh says, this gets fired for every character code that is pressed in the input. This is mostly just showing that you need to use the keyup event to trigger backspace, rather than the keypress event you are currently using.
The solution by Jonathon Bolster does not cover all cases. I adapted it to also cover modifications by cutting and pasting:
$("#inputname").on('change keyup copy paste cut', function() {
//!this.value ...
});
see http://jsfiddle.net/gonfidentschal/XxLq2/
Unfortunately it's not possible to catch the cases where the field's value is set using javascript. If you set the value yourself it's not an issue because you know when you do it... but when you're using a library such as AngularJS that updates the view when the state changes then it can be a bit more work. Or you have to use a timer to check the value.
Also see the answer for Detecting input change in jQuery? which suggests the 'input' event understood by modern browsers. So just:
$("#inputname").on('input', function() {
//!this.value ...
});
Another way that does this in a concise manner is listening for "input" event on textarea/input-type:text fields
/**
* Listens on textarea input.
* Considers: undo, cut, paste, backspc, keyboard input, etc
*/
$("#myContainer").on("input", "textarea", function() {
if (!this.value) {
}
});
You can check the value of the input field inside the on input' function() and combine it with an if/else statement and it will work very well as in the code below :
$( "#myinputid" ).on('input', function() {
if($(this).val() != "") {
//Do action here like in this example am hiding the previous table row
$(this).closest("tr").prev("tr").hide(); //hides previous row
}else{
$(this).closest("tr").prev("tr").show(); //shows previous row
}
});
Inside your .keypress or .keyup function, check to see if the value of the input is empty. For example:
$("#some-input").keyup(function(){
if($(this).val() == "") {
// input is cleared
}
});
<input type="text" id="some-input" />