fire a button with pressing ENTER after coming with TAB to it - javascript

there is a button in my code. Apart from using mouse and clicking it, I'd like to fire (pressing ENTER) it after selecting it with TAB.
<div id="CloseButton" tabindex="0" onkeypress="return submitOnEnter(blah,event)">Close</div>
if it helps:
function submitOnEnter(blah,e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13) {
//at this point I need to fire a button w/o using its id
return false;
} else {
return true;
}
}
If someone knows how to do it?
Is it possible to make 'blah' refer to <div>, such that I could do:
$(blah).click();

this could work:
jQuery(':focus').click()

here is my solution:
part of HTML, close button is a div element and is a part of a modal window:
...
<div class="closeButton">
<span id="closeSpan" tabindex="0">Close</span>
</div>
...
JS, within the ModalWindow class:
$(modWin).find("#closeButton").one("click",
this.close).keypress(this.doNothing);
this.close = function () {
$("#modalWindow").css("display","none").fadeOut(200).html("");
$("#modalWindow #closeButton").hide();
$(window.self.document.body).find("#modalWindow").remove();
}
this.doNothing = function (e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13) {
innerthis.close();
return false;
} else {
return true;
}
}
PS: innerthis is defined within the ModalWindow class as:
var innerthis = this;

Related

using JavaScript how to disable the Right-click or how to remove the inspect element option in the right-click window when click on the scroll bar

I am trying to disable right-click action on the scroll bar or remove the Inspect element option in the right-click menu window on my page. I am using the below code to fulfill my requirement. but where it is getting an issue that I am not able to find and other solution also not coming into mind. Please find my sample code below. Please Any help appreciated.
Sample Application - Using this link you can check the code.
<html oncontextmenu="return false;">
<head>
<style>
</style>
<script >
document.onkeypress = function (event) {
event = (event || window.event);
return keyFunction(event);
}
document.onmousedown = function (event) {
event = (event || window.event);
return keyFunction(event);
}
document.onkeydown = function (event) {
event = (event || window.event);
return keyFunction(event);
}
//Disable right click script
var message="Sorry, right-click has been disabled";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
function keyFunction(event){
//"F12" key
if (event.keyCode == 123) {
return false;
}
if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
return false;
}
//"J" key
if (event.ctrlKey && event.shiftKey && event.keyCode == 74) {
return false;
}
//"S" key
if (event.keyCode == 83) {
return false;
}
//"U" key
if (event.ctrlKey && event.keyCode == 85) {
return false;
}
//F5
if (event.keyCode == 116) {
return false;
}
}
</script>
</head>
<body >
<iframe style="width:100%" height="473" src="https://africau.edu/images/default/sample.pdf#toolbar=0"></iframe>
<div style="width:96%;height:473px;background-color:transparent;position:absolute;top:0px;max-width: 100%;">
</body>
</html>
The right click default behavior is to fire a contextmenu event whose default behavior is to display the context menu.
In order to prevent that default behavior, write this:
document.addEventListener('contextmenu', e => e.preventDefault());
Note that it won't prevent people from accessing developer tools with F12 and there is nothing you can do about this.

How to Manage This Enter Key Event with three Different Situation

In my aspx page, I am also using two Modal Extender but the main problem is that when modal popup extender comes in front then still search button click I want that modal popups button should click on enter key when popup is shown.
I have set Default Enter Key Event in my page like this:
$(document).ready(function () {
$("body").bind("keydown", function (event) {
var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
if (keycode == 13) {
document.getElementById('btnSearch').click();
return false;
} else {
return true;
}
});
and it's working good.
But the problem is that I have also two ModalPopupExtender on my Page
with Id = ModalPopupExtender1 and Id = ModalPopupExtender2.
Now I want when My ModalPopupExtender1 called then button with ID = "btnMUpdate" should click on enter key.
and when my ModalPopupExtender2 called then
button with ID = "btnConfirm" should click on enter key.
$(document).ready(function () {
this.ModalPopupExtender1.add_showing(show1);
this.ModalPopupExtender2.add_showing(show2);
this.ModalPopupExtender1.add_hiding(hide1);
this.ModalPopupExtender2.add_hiding(hide2);
$("body").bind("keydown", function (event) {
var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
if (keycode == 13) {
if (this.ModalPopupExtender1IsShown) {
document.getElementById('btnMUpdate').click();
} else if (this.ModalPopupExtender2IsShown) {
document.getElementById('btnConfirm').click();
} else {
document.getElementById('btnSearch').click();
}
return false;
} else {
return true;
}
});
function show1() {
this.ModalPopupExtender1IsShown = true;
}
function show2() {
this.ModalPopupExtender2IsShown = true;
}
function hide1() {
this.ModalPopupExtender1IsShown = false;
}
function hide2() {
this.ModalPopupExtender2IsShown = false;
}
On each ModalPopupExtender you can put a callback on show and hide events
i come across this and that worked fine for me
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender3" runat="server"
PopupControlID="PanelMsg" TargetControlID="lnkdummy3" BackgroundCssClass="modalBackground" >
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="PanelMsg" DefaultButton="btnMSend" runat="server" Style="display: none;background-color:#e0e0e0">
</asp:Panel>
given modal extender panel DefaultButton="btnMSend" and that worked fine

Javascript - How to create a keypress event?

I've looked on the internet for this and all I can find are depreciated functions so before posting please check to make sure that the code you suggest isn't depreciated.
I've found this and tried it:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent
$(document).ready(function () {
var x = new KeyboardEvent("FormatCode", deprectiatedArgument);
});
But after further inspection the KeyboardEventInit is depreciated.
I would like to create an event on pres of the CTRL + K keys.
You have a specific key code for every button on the keyboard.
All of them are here http://keycode.info/.
$(document).keyup(function(e) {
if (e.keyCode === 13) function(); // enter
if (e.keyCode === 27) function(); // esc
});
Here's a vanilla JS solution to detect a CTRL + k keypress event:
UPDATED to also trigger the event.
document.addEventListener("keypress", function(e) {
if ((e.ctrlKey || e.metaKey) && (e.keyCode == 11 || e.keyCode == 75)) {
alert("ctrl+k!");
}
});
document.getElementById("trigger").addEventListener("click", function(){
//trigger a keypress event...
var e = document.createEvent('HTMLEvents');
e.initEvent("keypress", false, true);
e.ctrlKey = true;
e.keyCode = 75;
document.dispatchEvent(e);
});
Press <kbd>ctrl+k</kbd> or
trigger the event
you can use a library called shortcut.js .. here is a link to their source code for downloading:
http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js
then run ur code by making this function:
shortcut.add("Ctrl+K",function() {
alert("Hi there!");
});
and here is the documentation : http://www.openjs.com/scripts/events/keyboard_shortcuts/
hope that can help.
$(document).ready(function () {
var bool = false;
$(document).keydown(function (e) {
if (e.keyCode === 17) {
bool = true;
}
if (bool == true && e.keyCode == 75) {
alert("");
}
});
$(document).keyup(function (e) {
if (e.keyCode === 17) {
bool = false;
}
});
});
This is how me and a friend got it working

Disable a key press event through JavaScript

I need to disable shift keypress event in my site by using JavaScript or any other method.
Below is my code:
$(document).ready(function() {
document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event) {
keycode = window.event.keyCode;
}
else if (e) {
keycode = e.which;
}
//alert(keycode);
if (keycode == 16) {
alert(keycode);
return false;
}
}
});
// bind an event listener to the keydown event on the window
window.addEventListener('keydown', function (event) {
// if the keyCode is 16 ( shift key was pressed )
if (event.keyCode === 16) {
// prevent default behaviour
event.preventDefault();
return false;
}
});
http://api.jquery.com/keypress/
In addition, modifier keys (such as Shift) trigger keydown events but not keypress events.
Try this
$('#target').keydown(function(event) {
if (event.shiftKey) {
event.preventDefault();
}
}
document.onkeydown = function (e) {
var e = e || event;
if (e.shiftKey === true) {
return false;
}
};
You may try this:
jQuery(document).keydown(function(e){
if(e.which === 16) {
e.preventDefault();
return;
}
console.log(e.which);
});
See demo.
Use Firebug and check console output.

keydown Event to override return key does not work in Firefox

I have the following simple javascript code, which handles the Return Key, I don't want to submit the form when the return key is pressed in the textbox.
All this works fine, but in Firefox, if i show an alert message, then it stops working and the form starts getting submitted, whereas the exact code without alert message works fine and stops the form from being submitted. I dont understand why alert is spoiling the party..
$("document").ready(function () {
$("#input1").keydown(OnKeyDown);
});
function OnKeyDown(e) {
if (e.keyCode == 13) {
// alert('this will fail'); // Adding alert makes the form submit
stopBubble(e);
return false;
}
}
function stopBubble (e) {
// If an event object is provided, then this is a non-IE browser
if (e && e.stopPropagation)
// and therefore it supports the W3C stopPropagation() method
e.stopPropagation();
else
// Otherwise, we need to use the Internet Explorer
// way of cancelling event bubbling
window.event.cancelBubble = true;
}
<input type="text" id="input1" value="">
I don't really know if the event is normalized or not. But this is how I have to do it for it to work in all browsers:
$(whatever).keypress(function (e) {
var k = e.keyCode || e.which;
if (k == 13) {
return false; // !!!
}
});
jQuery normalizes this already, you can just do:
$(document).ready(function () {
$("#input1").keydown(OnKeyDown);
});
function OnKeyDown(e) {
if (e.which == 13) { //e.which is also normalized
alert('this will fail');
return false;
}
}
When you do return false from a handler, jQuery calls event.preventDefault() and event.stopPropgation() internally already. You can also do the anonymous function version:
$(function () {
$("#input1").keydown(function() {
if (e.which == 13) return false;
});
});
textBox.onkeydown = function (e) {
e = e || window.event;
if (e.keyCode == 13) {
if (typeof (e.preventDefault) == 'function') e.preventDefault();
if (typeof (e.stopPropagation) == 'function') e.stopPropagation();
if (typeof (e.stopImmediatePropagation) == 'function') e.stopImmediatePropagation();
e.cancelBubble = true;
return false;
}
}

Categories

Resources