I have an input that I want to allow the user to save the text either by pressing enter or by clicking anywhere else on the screen. Getting the code to process when the user presses enter is no problem. But I want to process the same code by triggering the jquery keyup event when the user clicks away just as if they pressed Enter on the input box instead. The theory isn't giving me an issue, but the keycode is either not being passed correctly or interpreted correctly when clicking away. When I alert the interpreted keycode, I get a "1" which doesn't equate to any keypress. What am I doing wrong?
$(document).on("click","body",function(e){
if(e.target.id!="openInput"){ //Indicates user has clicked out away from the input
if($(".attributeEdit")[0]){ //This is a unique class added
var i = $.Event('keyup');
i.which = 13;
$(".attributeEdit").trigger(i); //Have also tried triggering off #openInput, too with no success
}
}
});
$(document).on("keyup",".attributeEdit",function(){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
do stuff;
}
else{
alert("keycode: " + keycode); //This results in a "1" every time user clicks away
}
});
I found a solution to the end objective using Hiren Raiyani's suggestion of a function call. It doesn't actually answer the original question, but since it solved my problem, I'm hoping this will be useful to others that search. I created a function to "do stuff" and that way, I can call that function both after the Enter key is pressed and after the mouse is clicked.
function doStuff(x,y){
do stuff
}
$(document).on("click","body",function(e){
if(e.target.id!="openInput"){ //Indicates user has clicked out away from the input
if($(".attributeEdit")[0]){ //This is a unique class added
doStuff(x,y);
}
}
});
$(document).on("keyup",".attributeEdit",function(){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
doStuff(x,y);
}
});
Related
I am trying to change the behaviour of selects in an html form.
I would like that when a user navigates the form using the keyboard, if they are selecting an element and presses tab, the element is selected and the focus switches to the next form input. Normally, you need to press enter to select the element and then you can use tab to switch to the next one. If enter isn't pressed, no option is selected.
To do this, I want to capture the TAB keypress and trigger an ENTER keypress followed by a TAB.
This is what I have for now:
$('form[class="ui form"]').on('keydown', 'div[class="ui fluid selection dropdown active visible"]', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var y = jQuery.Event('keydown', {which: 13});
$(this).trigger(y);
var x = jQuery.Event('keydown', {which: 9});
$(this).trigger(x);
}
});
Here is a demo: JSFiddle
The code 'works' up to e.preventDefault(), the tab keypress doesn't switch the focus to the next input. However, the enter and tab actions aren't triggered, so nothing happens. What should I do ?
Thank you in advance !
UPDATE 10/10: Found the problem! Triggering event x (tab keypress) makes the code enter an infinite loop. Therefore the whole approach is wrong. I'll soon post an answer.
When I try it passing whichas the event object, it does work jsfiddle.net/mendesjuan/sL7tnfm6/5
$('form[class="ui form"]').on('keydown', 'div[class="ui fluid selection dropdown active visible"]', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var y = jQuery.Event('keydown', {which: 13});
$(this).trigger(y);
}
});
The draft code in the question triggers an infinite loop. The key point in the problem is capturing the selected (active) element when the user presses TAB and switches the focus to the next element.
So, it is better to use a function called onblur:
$('form[class="ui form"]').on('blur', '.dropdown', function () {
var y = jQuery.Event('keydown', {which: 13});
$(this).trigger(y);
});
Please check out this fiddle: http://jsfiddle.net/7wp9rs2s/ this is how far I have come with this project.
Basically, in the above fiddle you can double click on one of the 4 items and when you do, you get a textbox where you can edit it. Then you click out and it goes back to being a text. Most users wont click out but will instead press enter (like SO's comment function) so if the user presses enter, while making the edit, I want the script to react in the same way as if the user clicked out of the box.
I know how to capture the Enter key:
$(document).keypress(function(e) {
if(e.which == 13) {
alert("in Enter");
}
});
But I do not know how to make the function do what I need :(
Your functions are called on blur, so simply trigger a blur on the input :
$(document).keypress(function(e) {
if(e.which == 13) {
$(e.target).blur();
}
});
Fiddle
I'am having the following code in javascript in order to navigate from textboxes and textareas. The issue is the functionality is working fine but, when clicking on enter it is navigating to next textbox, at the same time it is navigating to next page, how to prevent to navigate to next page when clicking on enter key. Can someone help me thanks.
$('input[type="text"],textarea').keyup(function(e){
if(e.which==39 || e.which==13)
$(this).closest('td').next().find('input[type="text"],textarea').focus();
else if(e.which==37 || e.which==8)
$(this).closest('td').prev().find('input[type="text"],textarea').focus();
else if(e.which==40 || e.which==13)
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input[type="text"],textarea').focus();
else if(e.which==38 || e.which==8)
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input[type="text"],textarea').focus();
});
On keyDown for your text input, catch the input if it's the enter key and prevent the default behavior:
$('input[type="text"],textarea').keydown(function () {
if(event.keyCode == 13){
event.preventDefault();
}
});
If I recall correctly, keyDown is necessary to prevent the default enter action, rather than keyUp. But give both a try and see which works.
I'm using the below JavaScript function to prevent backspace from going back.
function preventBackspace(e) {
var evt = e || window.event;
if (evt) {
var keyCode = evt.charCode || evt.keyCode;
if (keyCode === 8) {
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
}
}
I have added onkeydown="preventBackspace();" to all the text boxes.
I have two radio buttons and two textboxes which when checked make the other textbox readonly. When hitting the backspace key it is not going to back page, but I am not able to delete from the editable text box. Please suggest. Thanks!
When the user is currently focused on a textbox, the backspace key does not cause the browser to go back. The backspace in a textbox is used to delete a character - and since you've added preventDefault(), you're stopping that behavior from happening.
If your goal is to prevent the user from accidentally leaving the form before they are finished, you can use window.onbeforeunload to display a warning message that allows the user to cancel navigation:
window.onbeforeunload = function() {
return "Are you sure you want to leave this page? Your current entries" +
" will be lost.";
};
I have a table with a quick edit function (updates only one field using AJAX), and I wish for 'enter' to submit the change. Trouble is, I have a button on a form on the same page, and every time I press 'enter' the action attached to that button (i.e. submit the form, which I do not want to do) is fired, and I cannot figure out for the life of me how to prevent that.
I've tried the following code, preventing the default on the keyup event (which is probably wrong) and on the button. My understanding though is that you prevent the default of an event, not an object, so I'm really not sure what to do -
/** Capture a key press (while a field within the quick edit row is selected) */
qeRow.keyup(function(e){
e.preventDefault(); // Also tried '$('#change-permissions-button').preventDefault'
if(e.keyCode === 27) { // Cancel on 'escape' (This is working fine)
return inlineEditUserGroup.revert();
} else if(e.keyCode === 13) { // Save the data on 'enter'
return inlineEditUserGroup.save();
}
});
Thanks.
Try listening to the keydown or keypress event.
qeRow.keypress(function(e){
e.preventDefault(); // Also tried '$('#change-permissions-button').preventDefault'
if(e.keyCode === 27) { // Cancel on 'escape' (This is working fine)
return inlineEditUserGroup.revert();
} else if(e.keyCode === 13) { // Save the data on 'enter'
return inlineEditUserGroup.save();
}
});
I guess the keyup-event is triggered 'to late', because it only listens to a key after you pressed in, and than the form is already submitted.