I am trying to detect a keypress inside of a scene that is a div with the id "world" I have this code which I think should work but it does not. Here it is:
$('world').keyup(function(e){
console.log('keyup');
if(e.keyCode == 46 || 8) {
if(selectedWood != null){
array.splice(index, object.findIndex(selectedWood));
}
}
});
The first issue is you need '#' to select an element with ID, so $('#world') instead of ('world').
The second issue is e.keyCode will work on some browsers but not all. Since you're using jQuery, you can reliably use e.which:
if(e.which == 46 || e.which == 8)
As your viewport div can't be focussed (unlike a text input field), your method won't detect any keyup. Instead you need to attach the event listener to window:
$(window).keyup(function (event) {
...
});
If you have any <input> fields or <textarea> elements on your webpage, you probably don't wan't to listen to these 3d scene specific events while entering text. So, you might want to extend the code:
$(window).keyup(function (event) {
if(['INPUT', 'TEXTAREA'].indexOf(event.target.tagName) !== -1) return;
...
});
Related
I have an HTML page that is partially generated by a 3rd party that I cannot change. However, I can add my own Javascript to the page to modify it's behavior.
I want to remove a keypress event listener from an input textbox.
In Chrome dev tools, if I view the element, I can see the following two events tied to a keypress:
I added the second event listener with the following code:
$('#signInName').keypress(function (e) {
var key = e.which;
if(key == 13 && $('.sendCode').css('display') != 'none')
{
$('.sendCode').trigger('click');
return false;
}
});
I want to remove the first listener in the image. If I click the 'remove' button in dev tools I can confirm that I get the functionality I want, which is to click a different button when I press ENTER, than what the 3rd party has set to fire.
I can see that I can get access to the events using this jquery:
> $('#signInName').keypress.length
< 2
But, I am very limited in my JQuery or javascript experience, and I want to remove the event listener as mentioned.
How can I reference and remove this other event listener preferably using a static identifier and without using the exact index of 0 in the collection, which might change?
Name the function:
signInNameKeypressHandler = e => {
var key = e.which;
if(key == 13 && $('.sendCode').css('display') != 'none')
{
$('.sendCode').trigger('click');
return false;
}
}
$('#signInName').keypress(signInNameKeypressHandler);
//later
$('#signInName').off('keypress', signInNameKeypressHandler);
You can use remove removeAttr for removing first event listener before defining your event listener.
$("#signInName").off("keypress");
$('#signInName').keypress(function (e) {
var key = e.which;
if(key == 13 && $('.sendCode').css('display') != 'none')
{
$('.sendCode').trigger('click');
return false;
}
});
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 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/
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');
}
}
});
I don't want my website's user to use backspace to go to the previous page,
but I still want to keep the use of backspace,
just like deleting wrong typing.
How can I do?
Thanks a lot.
As others have mentioned there are methods in which you can monitor for backspace key events and perform different actions.
I recommend against catching the backspace key for a couple of reasons:
1) It's simply irritating and irritated users are likely to not return to your page.
2) Backspace is not the only method of returning to the previous page. There are other key combinations that can accomplish the same thing, as well as the obvious "back button".
Don't do it - but if you must, use onbeforeunload() rather than trapping browser specific key strokes.
Solution: Place the following code toward the end of all your pages that contain forms:
<!-- Block the Backspace and Enter keys in forms, outside of input texts and textareas -->
<script type="text/javascript">
function blockBackspaceAndEnter(e) {
if (!e) { // IE reports window.event instead of the argument
e = window.event;
}
var keycode;
if (document.all) {
// IE
keycode = e.keyCode;
} else {
// Not IE
keycode = e.which;
}
// Enter is only allowed in textareas, and Backspace is only allowed in textarea and input text and password
if ((keycode == 8
&& e.srcElement.type != "text"
&& e.srcElement.type != "textarea"
&& e.srcElement.type != "password")
|| (keycode == 13 && e.srcElement.type != "textarea")) {
e.keyCode = 0;
if (document.all) {
// IE
event.returnValue = false;
} else {
// Non IE
Event.stop(e);
}
}
}
for (var i = 0; i < document.forms.length; i++) {
document.forms[i].onkeydown = blockBackspaceAndEnter;
}
</script>
I have the following comments about what other people answered here before:
Someone said:
"Please don't. Users like
backspace-to-go-back; going back is
one of the most vital browser features
and breaking it is intolerably rude."
My answer to him is:
Yes, usually people DO use the back-button to go back, BUT NOT on pages with FORMS. On the other hand it is really easy for people to accidentally click near or outside an input text or textarea, and then press the back button, so they will lose all their edits, as someone else also noticed:
"Users aren't in a textbox and hit the
backspace, completely losing all the
form information they've just entered.
Wouldn't normally be a problem, but
for us, we're filling out lots of text
on long state forms."
The same undesired behaviour can also be said about the Enter key to submit the form, which usually is only desirable (if ever) for small forms with a few fields, but not for forms with many fields and select boxes and input boxes and textareas, in which most of the time you DO NOT want that the form is submitted when you press Enter.
So this is why I suggest the code above, which applies to all <FORM> tags the function suggested by webster, but without the checks for ALT, which I don't think is useful, and without the checks for CTRL+N and CTRL+R and CTRL+F5, which we don't want to block, because when they are used they are NOT accidental.
Unfortunately, the code above does not work in Firefox when you have DIVs and TABLEs inside your FORM! That is because the keydown event seems to not be propagated to the containing form, and instead the default (UNDESIRED!) behaviour is applied for the Backspace and Enter keys.
I couldn't yet find a solution for this one...
You can use the "onbeforeunload" property on the body tag to prompt the user that he is leaving the page.
You can simply use the following code snippets to block the backspace when the cursor is in texarea, text and password controls.
function onKeyDown()
{
if((event.altKey) || ((event.keyCode == 8) &&
(event.srcElement.type != "text" &&
event.srcElement.type != "textarea" &&
event.srcElement.type != "password")) ||
((event.ctrlKey) && ((event.keyCode == 78) || (event.keyCode == 82)) ) || (event.keyCode == 116) ) {
event.keyCode = 0;
event.returnValue = false;}
}
Call this function from body tag onkeydown event
Filme Noi Cinema has the right answer, but the example code is a bit dated. I just needed this solution so I thought I would post the code I used.
//I use the standard DOM method for accessing the body tag, because the
//non-standard HTML DOM shortcuts are not stable. The correct behavior is
//dynamically attached to the entire body using the onkeypress event, which
//is the most stable event to target cross browser.
document.getElementsByTagName("body")[0].onkeypress = function (event) {
var a = event || window.event, //get event cross browser
b = a.target || a.srcElement; //get source cross browser
//the only thing that matters is the backspace key
if (a.keyCode === 8) {
//if you are a textarea or input type text or password then fail
if (b.nodeName === "textarea" || (b.nodeName === "input" && (b.getAttribute("type") === "text" || b.getAttribute("type") === "password"))) {
return true;
} else {
//backspace is disabled for everything else
return false;
}
}
};
This code needs to be executed before the user starts engaging the page. There are numerous ways to do this:
You can put the above code into any function that is already attached to the onload event.
You can wrap the above code that is bound to the page's onload event.
You can put the above code into a self executing function.
Examples:
//self executing function
(function () {
the solution code here
}());
//wrapper to onload event
document.getElementsByTagName("body")[0].onload = function () {
the solution code here
};
I am adding this code to Pretty Diff if you want to see an example in action.
You should be able to attach a onKeydown/Up/Press listener to your window. In this function, look at the keycode that was pressed, and at the event target. If the keycode is backspace, and the target is NOT an input box or a textarea, prevent the event.
I finally found one that works on all browsers.
It's by Hazem Saleh
His website address is:
http://www.technicaladvices.com/2012/07/16/preventing-backspace-from-navigating-back-in-all-the-browsers/
/*Starts here:*/
document.onkeydown = function (event) {
if (!event) { /* This will happen in IE */
event = window.event;
}
var keyCode = event.keyCode;
if (keyCode == 8 &&
((event.target || event.srcElement).tagName != "TEXTAREA") &&
((event.target || event.srcElement).tagName != "INPUT")) {
if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
event.stopPropagation();
} else {
alert("prevented");
event.returnValue = false;
}
return false;
}
};
/*Ends Here*/