I have added the following code to my site to prevent tabbing, this applies to the whole document. Problem is that this obviously disables all tabbing throughout the site, how can I add a rule in to allow inputs to be tabbed? I tried adding .not('input') but this doesnt seem to work.
$(document).keydown(function(objEvent) {
if (objEvent.keyCode == 9) {
objEvent.preventDefault();
}
});
Thanks
You can check the value of document.activeElement.tagName.
If nothing is selected, document.activeElement will be the body tag in FireFox, Chrome, and the html tag in IE 7/8/9.
$(document).keydown(function(objEvent) {
if (objEvent.keyCode == 9) {
if (document.activeElement.tagName != 'INPUT')
objEvent.preventDefault();
}
});
The keyup event properly also sends a target with it.
objEvent.target should return the current target the user is at.
So checking up on if the target is an input field then ignore the preventDefault...
Edit: Not sure if this is gonna work. "wsanville" method looks more legit.
Related
If you click the second orange "Заказ в 1 клик" button at this page you'll see the form with the checkbox at the bottom. How to figure out what script is blocking the checking of this chackbox?
May be it's due to this script:
$("#contactForm_oneclick").click( function(e){
if(e.target.getAttribute('class') != 'addtocart_button' || e.target.getAttribute('id') == 'agree') {
return false;
}
})
but how to change it correct?
Instead of returning false try to stop event propagation after it was handled.
$("#contactForm_oneclick").click( function(e){
if(e.target.getAttribute('class') != 'addtocart_button' || e.target.getAttribute('id') == 'agree') {
e.stopPropagation();
}
})
That tells the browser not to call click event handlers for the parents of "contactForm_oneclick" div tag. For more information about how event bubbling works, check out this https://en.wikipedia.org/wiki/Event_bubbling
You are correct about the snippet being the problem. The last part of your IF is stopping this checkbox from being ticked, below are a simple edit that should work.
$("#contactForm_oneclick").click( function(e){
if(e.target.getAttribute('class') != 'addtocart_button') {
return false;
}
});
Note: I can't find any good reason for the removed part to be there, but it could still affect other parts of the site that I don't know about. Check that your page works as intended before going live with the change.
EDIT: To answer your other question about how to find out what is blocking the checking of this checkbox I'd see this answer about finding all event-listeners attached to a specific DOM-element.
Well, Im trying to make a custom shortcut for a web application. But I have a little problem ( I tried to find a solution but I only found the preventDefault and shortcut.add , I didnt understand well the second one)
I want to know how can I use the custom shortcut of my code without calling the browser shortcut. And if I use shift key the default shotcut wont disable the uppercase writing.
thx a lot for the help, greetings from chile.
var menu_abierto=false;
$(document).on('keypress',function(e){
if(e.which==69 && e.ctrlKey && menu_abierto==false){
$('.btn-1,.btn-2 ,.btn-3').prop('disabled',true);
$('#lista-emergencias').show();
MenuLateralIzq();
listarEmergencias();
menu_abierto=true;
} else if(e.which==69 && e.ctrltKey){
$('.btn-1 ,.btn-2, .btn-3').prop("disabled",false);
$('#lista-emergencias ul li').remove();
$('#lista-emergencias ul hr').remove();
$('#lista-emergencias').hide();
OcultarMenuIzq();
menu_abierto=false;
}
});
You have to add e.preventDefault() to prevent the default browser action and then come your custom action :
if( e.target.tagName.toUpperCase() != 'INPUT' ){
if(e.which==69 && e.ctrlKey && menu_abierto==false){
e.preventDefault();
$('.btn-1,.btn-2 ,.btn-3').prop('disabled',true);
$('#lista-emergencias').show();
MenuLateralIzq();
listarEmergencias();
menu_abierto=true;
} else if(e.which==69 && e.ctrltKey){
e.preventDefault();
$('.btn-1 ,.btn-2, .btn-3').prop("disabled",false);
$('#lista-emergencias ul li').remove();
$('#lista-emergencias ul hr').remove();
$('#lista-emergencias').hide();
OcultarMenuIzq();
menu_abierto=false;
}
}
Add if( e.target.tagName.toUpperCase() != 'INPUT' ){ if you want to disable this for inputs.
Explanation :
e.target mean the current selected element, tagName get the type of this element incase of input field that will return INPUT, toUpperCase() just to make sure that the INPUT string returned is on mode UpperCase, != 'INPUT' mean if not input in other words if the element selected is not an input field then you can replace the browser shortcuts by the customs ones.
Check SO question/answers javascript capture browser shortcuts (ctrl+t/n/w).
Hope this helps.
You need to set 2 things:
e.stopPropagation()
Prevents further propagation of the current event.
e.preventDefault()
Cancels the event if it is cancelable, without stopping further propagation of the event.
I'm currently using Mozilla Firefox 14.0.1 and Google Chrome 20.0.1132.57 (latest I think).
My code goes something like this: http://jsfiddle.net/SVtDj/
Here's what I want to happen:
Enter something on input1
Click the disabled input (to trigger the onchange function... see jQuery)
NOTE: After inputting stuff on input1, we click the disabled input, nothing else.
The disabled input should now be enabled. Since by clicking the disabled input, it should trigger the input1's onchange function.
This works in Google Chrome, however, it doesn't work on Mozilla Firefox. How come clicking on the disabled element does not trigger the input's onchange function? This also applies to clicking a disabled instead of a disabled
Disabled inputs do not trigger change and click events on FireFox.
$('li:eq(1)').click(function(e){
if($.trim($('#input1').val()).length != 0){
$('#input2').prop('disabled', false);
}
});
http://jsfiddle.net/SVtDj/10/
instead of trim() you can use jQuery $.trim()function which is cross-browser:
$('#input1').change(function(){
if($.trim($(this).val()).length != 0){
$('#input2').prop('disabled', false);
}
});
demo
Your code is fine. The issue is that .change() requires a lost of focus (blur) before it triggers. Try changing it to .keyup()
http://jsfiddle.net/SVtDj/6/
additional: this is probably the effect you were going for
$('#input1').keyup(function(){
$('#input2').prop('disabled', $(this).val().trim().length == 0);
});
To extend Ramison's answer
If you want to toggle the disability on #input2 you can simple:
$('#input1').change(function(){
var isDisabled = !$.trim($(this).val()).length;
$('#input2').prop('disabled', isDisabled );
});
And the demo: http://jsfiddle.net/SVtDj/7/
The issue is Firefox needs you type 'enter' or do something else so input1 looses the focus after having wrote in input1 to cast the "onchange" event I think. Maybe this question is linked to yours, and it made me try the following that works with Firefox. (I didn't try it on other browsers)
$('#input1').bind('input',function(){
if($(this).val().trim().length != 0){
$('#input2').removeAttr('disabled');
}
});
That's because in FF, when an input is disabled it is really disabled (it doesn't receive mouse clicks).
Clicking on your disabled element doen't produces a blur event (focus lost) on input1, so the onchange doesn't gets fired.
You can workaround this easily with some classes and jQuery. For example:
<input class=disabled id=input2>
some css:
.disabled { background: #888; }
and then...
$(function(){
// disable keypresses on "disabled" input
$('.disabled').keypress(function(e){
e.preventDefault;
e.stopPropagation;
return false;
});
// doesn't allow to focus
$('.disabled').focus(function(e){
$(this).blur();
});
});
to activate the "disabled" element:
$('#input2').removeClass('disabled');
Check it here: http://jsfiddle.net/SVtDj/11/
See the answer of #Andy E in this post Jquery event on a disabled input, i think it is the best solution to resolve your problem.
I'm making a single page app that is launching next week, for a pretty huge client, and going live for a pretty big event and well, there's still a ton to finish before then.
There's 100+ 'pages' which are all loaded within a single 700px x 600px window, and I had learned not long ago you could tab through the page/sections, which in-turn would break the app because it would bring focus to hidden off-screen elements, so for this reason, I disabled the tab key for the entire app.
But now there are a couple places where we have a form with a handful of input fields which you are not able to tab through as you fill in the form. It's a pain in the ass.
I need to make it so you can tab through the form fields, but only the form fields. I have the tabindex attribute set for the form, and have tried to make inputs tab enabled but was not able to make it work without causing the app to jump to hidden sections.
Here's the function I need to change so it will disable tab key except from input to input fields in a form.
window.onkeydown = function(e) {
if (e.keyCode === tab) {
return false;
}
}
I tried to do this, which obv didnt work lol
$('input').keydown(function(e) {
if (e.keyCode === tab) {
return true;
}
});
Thanks :)
I made some fixes to what #Joseph posted for an answer to this that handle being able to shift + tab through inputs of a form so you can reverse direction. It was a very annoying thing for me before when I first had to find a way to do this, and didn't have time to waste anymore trying to find a complete solution for this until now. Here it is.
$(function() {
// gather all inputs of selected types
var inputs = $('input, textarea, select, button'), inputTo;
// bind on keydown
inputs.on('keydown', function(e) {
// if we pressed the tab
if (e.keyCode == 9 || e.which == 9) {
// prevent default tab action
e.preventDefault();
if (e.shiftKey) {
// get previous input based on the current input
inputTo = inputs.get(inputs.index(this) - 1);
} else {
// get next input based on the current input
inputTo = inputs.get(inputs.index(this) + 1);
}
// move focus to inputTo, otherwise focus first input
if (inputTo) {
inputTo.focus();
} else {
inputs[0].focus();
}
}
});
});
Demo of it working http://jsfiddle.net/jaredwilli/JdJPs/
Have you tried setting tabIndex="-1" on all elements that you don't want to be able to tab to? I think that's a much better solution.
Otherwise, within your key handler function test event.target (or event.srcElement in IE) to see if the event originated with a form element. You seem to be using jQuery, so you could assign an "allowTab" class just to the fields in your form and then do this:
$(document).keydown(function(e) {
if (!$(e.target).hasClass("allowTab"))
return false;
});
Or
if (e.target.tagName !== "input")
// etc
what we do is to determine what input is next in line and skip to it!:
http://jsfiddle.net/qXDvd/
$(document).ready(function() {
//gather all inputs of selected types
var inputs = $('input, textarea, select, button');
//bind on keydown
inputs.on('keydown', function(e) {
//if we pressed the tab
if (e.keyCode == 9 || e.which == 9) {
//prevent default tab action
e.preventDefault();
//get next input based on the current input we left off
var nextInput = inputs.get(inputs.index(this) + 1);
//if we have a next input, go to it. or go back
if (nextInput) {
nextInput.focus();
}
else{
inputs[0].focus();
}
}
});
});
may need some optimization but it works. this was originally meant to skip non-form elements. you can add selectors not to skip if you like. additionally, you can add logic for the Shift+Tab behavior (maybe before the tab logic)
obviously, it will still go through some elements according to how they appear in the source. however, why not just remove those hidden elements from the DOM but still keep track of them using the methods found in this question. that way, you won't have the pain of having to cycle back and forth through off-screen elements.
I am displaying a form inside a div tag as a dialog to enter details.
In this form, I want to handle the ESC key using jQuery.
If any input tags have focus, keydown event will trigger. If the focus is on the form but not on any input tags then it will not trigger keydown event.
Here is my code:
$("#NewTicket").keydown(function(e) {
var unicode = e.keyCode ? e.keyCode : e.charCode
if (unicode == 27)
{
if (confirm("Are you sure you want to cancel?"))
return true
else
return false
}
});
Just add an id,class to the form
<form id="form">
....
and now do this :
$("#NewTicket,#form").keydown(function(e)
{
var unicode=e.keyCode? e.keyCode : e.charCode
if(unicode == 27)
{
if (confirm("Are you sure you want to cancel?"))
return true
else
return false
}
)};
This should work
You can't focus on forms. If you wan't to handle keydown on elements that don't get focus (such as divs or forms) you have to bind it to the document.
Turns out that jQuery automatically adds :focus selector which enables you to find the focused element by using $(':focus')
I believe that if you put your form in an element made focusable using tabIndex, like , or this focusable div is the container element inside the form, then you can bind the keyDown to this div instead. It works cross browser as far as I've tested but I've not seen this solution discussed much, so curious as to anyone's comments about this.
I know this is an old question but someone still might be looking for an answer.
Usually, I do capture key down at global level then forward it to a function and handle it there. For your needs, you can get nodeName. (Tested in FF, Chrome)
$(document).keydown((e)=>{//Capture Key
if(["INPUT","TEXTAREA"].indexOf(e.target.nodeName)!==-1){//If input in focus
console.log("INPUT FOCUSED",e.code,e.keyCode);
if(e.keyCode==27 || e.code=="Escape"){//Capture Escape key
console.log('ESC');
}
}
});