jQuery Click Not Working in Safari - javascript

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");
}
});
});​

Related

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.

Assign "Enter" key press to submit form in DotNetNuke

After extensive research on the internet I can't find a way to get my DNN module to virtually click the "Search" button and stay there, because after doing what I want somehow DNN hijacks my keypress and redirects to the Home page of the portal.
Even in the production environment it redirects to the local development environment. I don't have full knowledge of how the portal is configured because I "inherited" it, but I neither know where to search...
Any tips on this?
BTW, my code is the following and works correctly before DNN redirects :
$("input").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$("#<%=lbtnBuscar.ClientID%>").click();
}
});
I managed to find the answer by myself. To protect the application to redirect it's necessary to use this line of code:
//13 is the ASCII code of Enter key
ClientAPI.RegisterKeyCapture(pnContainer, btnSearch, 13);
The javascript I used is no longer necessary.
using javscript button click
$("input").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
document.getElementById("<%=lbtnBuscar.ClientID%>").click(); // Click on the Button
}
});
if you wany use exsisting code
$("input").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#'+'<%=lbtnBuscar.ClientID%>').click();
}
});
You are missing single quot, try this it will work. And if click on lbtnBuscar it does postback call, stop that using usersubmit=false; on button.

Regarding JQuery autosize

I have a textbox that autosizes using JQuery Autosize, however I can't seem to get a certain function to work properly.
When I press the "Enter" key, I need the textbox to go back to 1 row, with no value. However I can't seem to get it to work, my textbox consistently gets 2 rows. I've tried e.preventDefault() to no avail. Can someone help?
I have a fiddle you can access here to look at my code:
http://jsfiddle.net/RZjq7/
Thanks in advance!
Yours,
Rei
Rei,
You need to use preventDefault to cancel the Enter keypress and manual trigger autosize to call the adjust function of the plugin
$(function() {
$('textarea').autosize();
$('textarea').keypress(function(e) {
if (e.which == 13 && !e.shiftKey) {
$('textarea').val('');
$('textarea').trigger('autosize');
e.preventDefault();
}
});
});​

How can I prevent a user from middle clicking a link with javascript or jquery

I want to prevent the user from being able to middle click a certain link to open a new tab. I have tried the following:
$(window).on('mouseup', '.sptDetails', function(e){
e.preventDefault();
if(e.button == 1){
return false;
}
});
This doesn't seem to work.
It's an unfortunate combination of jQuery and the browser. To prevent the new tab from opening you have to use the click event (rather than mouseup), but jQuery does not run delegate click handlers for mouse buttons other than the left one:
// Avoid non-left-click bubbling in Firefox (#3861)
if ( delegateCount && !(event.button && event.type === "click") ) {
What you can do is using a non-delegate handler and check the target element yourself: http://jsbin.com/ojoqap/10/edit. This works on Chrome, at least (inspired by #Abraham).
$(document).on("click", function(e) {
if($(e.target).is("a[href]") && e.button === 1) {
e.preventDefault();
}
});
Remember, this is a bad idea. I do not recommend doing this. See the comments above. But here's how to detect middle-click:
if (e.which == 2)
return false
I'm guessing you're trying to make sure that some navigation remains in your 'parent' page.
I think approaching this from another angle might be appropriate.
Assuming you don't need to worry about non-JS users, as an alternative to preventing a middle click, I might suggest loading the content via an ajax call and inserting it into your current page.
This could be accomplished with a little javascript while leaving it usable (though maybe not ideally by users with JS turned off)
Just something to think about. There's plenty of ways to improve upon this idea I'm sure.
HTML:
<a href="/mylink" id="href-load-content">
<div id="content-pane"></div>
Javascript:
$(function() {
$('#href-load-content').data('href', function() { return $(this).attr('href') } )
.attr('href', 'javascript:return;')
.on('click', function() {
$.get($(this).data('href'), function(msg) { $('#content-pane').html(msg); });
});
});
Hi go through this reference..
http://delphi.about.com/od/objectpascalide/l/blvkc.htm
middle mouse keycode is 4
so you can try like this
if(e.which==4|| e.keycode==4)
e.returnValue=false;
// Google<br> Bing
$(function(){
$(document).on("click", function(e){
if($(e.target).is("#google") && e.button===1)
e.preventDefault()
})
})
FIDDLE LINK
None of the answers above worked for me. According to MDN the auxclick event is the proper way to do this.
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});
If you want to disable it for a certain link only, just replace the event listener target (window) with a reference to the specific node.

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

Categories