I have a page with many text input's. All input's share the same class for many reasons.
Now I am trying to capture a the ESC button when an input is focused and alert if the input has value or not.
Now this logically works only for the first field. After the first field, since all input's share the same class, when I press ESC button it gives you the value of the very first input.
So how can I say that I'm talking for the second, fifth or whatever input I am pressing ESC on.
Here is an example: http://jsfiddle.net/Y5e9W/
The first input works fine, the second input thought; when you press ESC it gives you the values of the first.
You should be able to bind the keyup event to the elements with your class, rather than the document. Then this will refer to the element with focus:
$(".gp").keyup(function(e) {
if(e.which === 27) {
if(this.value.length > 0) {
//Has a value!
}
else {
//Empty!
}
}
});
Here's an updated fiddle. Note that I've used the which property of the event object, which jQuery exposes to deal with browser differences between keyCode and charCode.
Update based on comments
If you do need to handle this at the document level, you can use the has method to narrow down your selection of .gp elements to the one which has focus:
if (gj.has(":focus").val() != 0) { //...
Here's another fiddle.
You could do -
$(".gp").keyup(function (e) {
if ($(this).is(":focus") && (e.keyCode == 27)) {
if ($(this).val() != 0){
alert('full');
$(this).val('');
}else{
alert('empty');}
}
});
Which will only respond to the keyup event of elements with the 'gp' class, you can then use this to access the relevant element.
Demo - http://jsfiddle.net/uqS72/2/
Related
I'm making a custom input field which should support subscript. When the user presses the down arrow + a number, then the number should be in subscript. I appended a onKeyDown and onKeyUp event listener to a content editable paragraph. Unfortunately the onKeyUp gets called when the user presses the number, which results in adding the number twice (once in subscript and once normal). How can I solve this problem?
function keyDown(event) {
var code = event.keyCode;
if (code === 40) {
option = 0;
}
}
function keyUp(event) {
var code = event.keyCode;
if (code === 40 || code === 38) {
option = -1;
}
console.log("release");
}
The onKeyPressed is not an option since this does not recognize the arrow keys in all browsers. Is there a native solution (without jQuery)?
What I usually do is to push the keyCodes into an Array on keyDown and .splice() it on keyUp.
All you have to do now is to check (probably against a pre-defined map) if the key states you desire are available in that Array.
As long as your text field has focus, any numeral key you press will be added to it in addition to whatever your keyup or keydown listeners add to it. Maybe you should take away focus from the text field on keydown if the key you are pressing is the down key and add focus back again after the keyup event has fired.
/* Keep track of the down key. */
var down=false;
/* Get the input text field. */
var input=document.getElementById("input");
input.addEventListener("keydown",keyDown);
input.addEventListener("keyup",keyUp);
/* Give focus to input. I'm not sure if this is the right way to do it, I haven't tested this code, but I know there's a way to give focus to elements and it sort of looks like this. */
input.focus();
function keyDown(event_){
switch(event_.keyCode){
case 40:
/* Once again, not sure how to unfocus, but I know you can. */
input.unfocus();
down=true;
break;
}
}
function keyUp(event_){
switch(event_.keyCode){
case 40:
/* Give focus back to input after the keyup event has fired. */
input.focus();
down=false;
break;
}
if (down){
input.value+=//The subscript version of whatever key you pressed.
}
}
Once again, I would just like to say that this code hasn't been tested and I'm not sure if focus() and unfocus() are real methods, but you get the idea. You want to momentarily stop the text field from accepting input while the down key is pressed so you can add your own special value to it without updating it's contents with the default response and then give focus back to the text field once the down key is no longer in use.
I have a divcontaining many input boxes. I don't want the user to be able to submit a space key into the field.
HTML
<div class="container">
Input1<input type="text">
Input2<input type="text">
</div>
Javascript
$(".container :input").keydown(function(event){
if(event.which == 32){
//code to change the specific text box to = ""
};
});
I have tried this.val() = "" but that doesn't seem to work for some reason.
If there is an alternative through html to stop the input boxes accepting space then that will work to.
I've updated your code here: http://jsfiddle.net/fg6p1ujz/
$(".container :input").keydown(function(event){
if(event.which == 32){
//uncomment if you want to clear the field
// $(this).val("");
return false
};
});
If you want to disable a key you can return false whenever the user presses the key. You can clear the field by using $(this).val("")
Within an event handler the this keyword refers to the element which raised the event. As such, you can do this:
$(".container :input").keydown(function(event) {
if (event.which == 32) {
$(this).val('');
};
});
Note that I have wrapped this in a jQuery object, so that I can use jQuery methods, such as val() or prop(), on it. Then I used the setter of val() to set the value of the field to ''.
You could also do this in native JS, by using the value property of the DOMElement itself:
this.value = '';
I am programming a jQuery plugin which tracks specific events. I have provided 2 JSFiddle examples for the sanitised code to assist at the end of the question.
I am struggling to fathom why 2 particular events are not firing. The first function tracks when the user triggers the backspace or delete keys within an input or textarea field. The code for this:
// Keydown events
$this.keydown(function (e) {
var keyCode = e.keyCode || e.which;
// Tab key
if (e.keyCode === 9) {
alert('tab key');
} else if (e.keyCode === 8 || e.keyCode === 46) { // Backspace and Delete keys
if ($this.val() !== '') {
alert('Backspace or delete key');
}
}
});
I only wish to track the error-correction keys when a field is not empty. The tab key in the above example works as expected within the conditional statement. The backspace and delete keys do not work when inside the plugin and targeting the element in focus.
The second event not firing is tracking whether a user becomes idle. It is making use of jQuery idle timer plugin to manipulate the element in focus.
// Idle event
$this.focus(function() {
$this.idleTimer(3000).bind('idle.idleTimer', function() {
alert('Gone idle');
});
}).focusout(function() {
$this.idleTimer('destroy');
});
With both of these events I have refactored the code. They were outside of the plugin and targeted $('input, select, textarea') and worked as expected. I have brought them inside the plugin, and set them to $(this) to manipulate elements currently in focus. For most of the functions, this has worked without fault, but these 2 are proving problematic.
The first JSFiddle is with the 2 functions inside the plugin. tab works, whereas the correction keys do not. Strangely, in this example the idle function is firing (it does not in my dev environment). As this is working in the JSFiddle, I accept this may be difficult to resolve. Perhaps suggestions on handling an external plugin within my own to remedy this?
Fiddle 1
The second JSFiddle has taken the backspace and delete key functionality outside of the plugin and targets $('input, select, textarea') and now works.
Fiddle 2
For Fiddle1:
if ($this.val() !== '') {
alert('Backspace or delete key');
}
Look at what $this actually is.
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');
}
}
});