We Keep Coding

How to catch an ENTER event and convert it into a TAB event?

i'm looking for a JQUERY or JS script to catch onkeydown Primefaces InputText property with ---> event.keyCode == 13 and convert it into a event.keyCode = 9.
I tried to script a solution like this in the example below.
But it doesn't works for me.
I tried different way to catch the event, cancel it and re-launch another event, but the problem persist.
So, can I convert it or launch another event to prevent the ENTER event? I don't wanna delete the possibility to press Enter to the user, I just wanna convert it.
temp0.onkeydown = function(e) {
if (e.which == 13) {
e.preventDefault();
var event = new Event('keydown', {bubbles: true, cancelable: true});
event.which = 9;
this.dispatchEvent(event);
}
}
Right now i'm using Primefaces 6.0 and a TreeTable for my InputText. I test the problem with TAB and it works perfectly, but with the Enter key the problem seems to block the entire table.
I read everything about this argument, but i was not able to find anything useful. I hope that somebody will able to help me. Thanks in advance.

How do I trigger Ratchet's push manually?

I have a link which makes a search. So far, it's working. The issue is when I want the search to be done through hiting the 'enter' button. So:
$('#searchedText').on('keypress', function(e) {
console.log("writed");
if ($(this).val().trim().length > 2) {
if (e.which == 13) {
console.log("Passed condition");
app.search = $('#searchedText').val();
// HERE'S WHERE I NEED TO TRIGGER RATCHET's PUSH
}
}
});
I tried to change window.location - Doesn't work
I tried to trigger tap & click event - Doesn't work
Any ideas?
Thanks in advance.

If anyone needs a solution for this, I finally found on the Ratchet's issues (github). If you wanna trigger a custom push, just do:
PUSH({url: 'YourUrl+hash', transition: 'slide-out'});
Regards

jQuery Click Not Working in Safari

For some reason, this script isn't working in Safari (tested on Windows, think it happens on Mac, too, though):
$("#searchTerms").focus(function() {
$(document).keypress(function(e) {
if(e.which == 13) {
$("#searchBtn img").click();
}
});
});
jsFiddle: http://jsfiddle.net/ux86V/
The script is supposed to click an image when a user presses enter while focused on a search box (it has to be set up this way, it's tied in to some weird third party service).
EDIT: It doesn't appear to work at all in the jsFiddle, but it does, so don't just assume the entire script is bad. I think jSFiddle just prevents redirects, and I have it set up to redirect to google.com for the example.
EDIT 2: It appears to be an issue with .click(). Is there an alternative to this that I could use, or is .click() the only way to register a click on an element?
EDIT 3: After more testing, it seems like the jQuery click event is somehow not working properly. It may have something to do with the way the form is submitted, I'm not sure. Link to live demo: http://www.weblinxinc.com/beta/blue-sky-marketing/demo/

13 is the code of enter key which is a special key , you can catch it on keyup only

try to use trigger();
$("#searchTerms").focus(function() {
$(document).keyup(function(e) {
if(e.which == 13) {
$("#searchBtn img").trigger("click");
}
});
});​

onkeypress + onblur in Javascript

The onblur event in Javascript is triggered when the element loses focus.
The onkeydown occurs on an element that has the focus when a key is pressed down and occurs periodically until the key is released.
If I want to validate a date field, the onkeydown event concerns 9 and 13 (enter and tab key).
But when I press the enter key, then I receive duplicate alert message.
Of course in this case we have two tests, onblur and onkeydown event.
this is the html code :
<html:text onblur="return onDateChange(this);"
onkeydown="return onDateKeyPress(this);"/>
the onDateChange() method is :
function onDateChange(obj){
//validateField is an externatl javascript method which trigger an alert message if we have errors in date
if(validateField(obj,'date',dateFormat)){
//do instructions
}
}
and finally the onDateKeyPress() method is :
function onDateKeyPress(obj){
if(window.event.keyCode == 9)
{
if(validateField(obj,'date',dateFormat))
{
//do instructions
}
}
if(window.event.keyCode == 13)
{
if(validateField(obj,'date',dateFormat))
{
//do instructions
}
}
}
So, the problem is to have one display alert message.
Any suggestions?

you can do it easily with jquery
$('#text_field_id').bind({
blur: function(event) {
if(validateField(this,'date',dateFormat)){
//do instructions
}
},
keydown: function(event) {
if(event.keyCode == 9)
{
if(validateField(this,'date',dateFormat))
{
//do instructions
}
}
if(event.keyCode == 13)
{
if(validateField(this,'date',dateFormat))
{
//do instructions
}
}
}
});
you dont need to include onclick or onkeydown in your text element. One small question you want to execute same instructions in all cases or different instructions???? if you want to execute same instructions, lot of codes can be removed.

In the solution above; keydownFired is true when blur is fired and the if branch of the code does nothing. so nothing happens.
If the blur has something to do other than showing alert; then the follwoing should work.
input.addEventListener('blur', function (e) {
doSomethingThatshldHappenAlwaysOnBLur();
if (keydownFired) {
keydownFired = false
} else {
showAlert();
}
})

Recently I had a problem with having onkeypress and onblur attached to one element. One of the major problems with onkeypress and onkeyblur is that they by nature will trigger each other :) (Triggered? Get it? That's a joke btw. I am bad at jokes, sorry!)
The solution is simple and stupid. Instead of having an alert when onkeypress happens AND when onblur happens you trigger only onblur. How?
//I gave this thing and id. You should always give your things and id. Ids are cool and I love them.
<html:text id="thisIsMyId"
onblur="return onDateChange(this);"
onkeydown="return onDateKeyPress(this)";
/>
the onDateChange() method will stay pretty much the same:
//This will stay the same, you will see why, soon
function onDateChange(obj){
//ValidateField is an externatl javascript method which trigger an alert message if we have errors in date
//If you might have noticed tha **this validate** function is used 3 times, why?
if(validateField(obj,'date',dateFormat)){
//do instructions and **I assume the alert?**
}
}
Now, we will make onDateKeyPress() a little bit blurry :)
//Here is where we strike
function onDateKeyPress(obj){
//This looks weird but it checks if the keycode actually works in the browswer
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
//Instead of having 2 ifs just make one if with and the logical operator "or" :)
if(keycode == 13 || keycode == 9){
//I am not sure if oyu need to use this but in the example I had, I had to use
//my validation-function otherwise it would just submit
if(validateField(this,'date',dateFormat)){
//If you have a submit form or something this can help
event.stopPropagation();
//we just trigged the onBlur Handler by "blurring" this thing :)
document.getElementById('thisIsMyId').blur();
}
}
With this we did cut one validation and have to write the logic only once. Only in the onDateChange() function.
If someone can make it even better please comment below. I would like to make the code even shorter.
At the end of the day it still depends on the specific situation. It worked for me but this is not a "fits-all-solution".

keydown event for form or div in html

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');
}
}
});