When the user press F1 key,I am planning to display our application help and suppress default action.
I tried with different options not to show help popup of IE.
Here is my Code:
document.addEventListener('keydown', function (e) {
if (e.key === 'F1' || e.keyCode == 112) {
e.cancelBubble = true;
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
//my help menu code goes here
}
});
Please let me know how can i achieve in showing the help page of my application instead of IE help.
I am using IE11 version.
You could subscribe to the window.onhelp event:
window.onhelp =function() {
alert();
return false;
}
Try doing this
<script>
$(document).ready(function () {
removedefaulthelp();
function removedefaulthelp()
{
window.onhelp = function () {
return false;
alert();
}
}
document.addEventListener('keydown', function (e) {
if (e.key === 'F1' || e.keyCode == 112) {
removedefaulthelp();
e.cancelBubble = true;
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
//my help menu code goes here
}
});
}
</script>
Refer this for more information.
Here is an example similar to Sukanya's answer, but my solution shows how to extend for the F2-F12 keys, and purposely disregards F-combination keys, such a CTRL + F1.
<html>
<head>
<!-- Note: reference your own JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h1>F-key trap example</h1>
<div><h2>Example: Press the 'F1' key to open help</h2></div>
<script type="text/javascript">
//uncomment to prevent on startup
//removeDefaultFunction();
/** Prevents the default function such as the help pop-up **/
function removeDefaultFunction()
{
window.onhelp = function () { return false; }
}
/** use keydown event and trap only the F-key,
but not combinations with SHIFT/CTRL/ALT **/
$(window).bind('keydown', function(e) {
//This is the F1 key code, but NOT with SHIFT/CTRL/ALT
var keyCode = e.keyCode || e.which;
if((keyCode == 112 || e.key == 'F1') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Open help window here instead of alert
alert('F1 Help key opened, ' + keyCode);
}
// Add other F-keys here:
else if((keyCode == 113 || e.key == 'F2') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Do something else for F2
alert('F2 key opened, ' + keyCode);
}
});
</script>
</body>
</html>
Related
Visitors can right click the web page and select view source or they press ctrl+u or ctr+shft+i or ctrl+shft+j or f12 and they can view the web page source code.
i did not create this code. i only modified it to suit my needs. So credit goes to those out there that are true coders! Thank you! initially i had embedded my html code into an iframe. when a visitor right clicked on the page they got an option for viewing the page source or frame source. other functions were also available that allowed the viewing of the code. adding this code to my pages stopped visitors from easily viewing the code by using any of the above mentioned methods.
<script language="JavaScript">
window.onload = function () {
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
document.addEventListener("keydown", function (e) {
//document.onkeydown = function(e) {
// "I" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
disabledEvent(e);
}
// "J" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
disabledEvent(e);
}
// "S" key + macOS
if (e.keyCode == 83 && (navigator.platform.match("Mac") ?
e.metaKey : e.ctrlKey)) {
disabledEvent(e);
}
// "U" key
if (e.ctrlKey && e.keyCode == 85) {
disabledEvent(e);
}
// "F12" key
if (event.keyCode == 123) {
disabledEvent(e);
}
}, false);
function disabledEvent(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
e.preventDefault();
return false;
}
}
</script>
</head>
<body oncontextmenu="return false">
<body>
Thanks for the comments everyone! I'm still learning. And yes, it is correct that this usually isn't a good idea to do to a page and yes there will be some who know all the different ways one can access the source code of a page. However, there will be many who only know of a couple ways to get there and many more who dont know how to at all. So I posted the previous before i found some issues with it. so i re-worked the script and now it does what i wanted. Im posting in the hopes that it helps someone. Goal: visitors will be unable to right-click the "page" or use ctrl+u, ctrl+shft+i, ctrl+shft+j or f12 to view options AND will be unable to use the browser back button. NOTE: web page is embedded within an iframe. Again, thanks to you coders and the info that you post! it's helping me learn!
<script type = "text/javascript" >
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
document.addEventListener("keydown", function (e) {
//document.onkeydown = function(e) {
// "I" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
disabledEvent(e);
}
// "J" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
disabledEvent(e);
}
// "S" key + macOS
if (e.keyCode == 83 && (navigator.platform.match("Mac") ?
e.metaKey : e.ctrlKey)) {
disabledEvent(e);
}
// "U" key
if (e.ctrlKey && e.keyCode == 85) {
disabledEvent(e);
}
// "F12" key
if (event.keyCode == 123) {
disabledEvent(e);
}
}, false);
function disabledEvent(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
e.preventDefault();
return false;
}
}, 50);
</script>
</head>
<body onLoad="changeHashOnLoad(); ">
I have been using jquery hotkeys plugin from jeresig's hotkey. Shortcuts work fine when the document is in focus, but when the focus is in input fields, the shortcuts are not working. I have used $(document) or $(document).find('input') for binding. But these are not working either.
I have used this following code for making shortcut:
$(document).ready(function(){
shortcutsInit();
});
function shortcutsInit(){
$(document).bind('keydown', "shift+f2", function() {
window.location.replace("/list");
return false;
});
$(document).bind('keydown', "f3", function() {
if($('#searchholder').length){
$('#searchholder').focus();
}
console.log('f3 pressed');
return false;
});
}
try it :
$(document).ready(function(){
$(document).on("keydown", function(e){
if(e.shiftKey && (e.which || e.keyCode || e.charCode) == 113){
window.location.replace("/list");
return false;
}
if((e.which || e.keyCode || e.charCode) == 114){
if($('#searchholder').length)
$('#searchholder').focus();
console.log('f3 pressed');
return false;
}
});
});
Maybe these options are solving the problem:
$.hotkeys.options.filterInputAcceptingElements = false;
$.hotkeys.options.filterTextInputs = false;
Application I am going to implement have a shortcut key-f4(Client Request).When I click f4 all the previous url's is listed.I want to disable this..Pls help me....
Try this
document.onkeydown = keydown;
function keydown(evt){
if (!evt) evt = event;
if (evt.keyCode==115){
return false;
}
}
<script type="text/javascript">
document.onkeydown=function(e) {
e=e||window.event;
if (e.keyCode === 115 ) {
e.keyCode = 0;
alert("This action is not allowed");
if(e.preventDefault)e.preventDefault();
else e.returnValue = false;
return false;
}
}
</script>
You can use the keydown event of jscript.
$(document).ready(function () {
$(window).keydown(function(event){
if (event.keyCode == 115) {
event.preventDefault();
}
});
}); //Document .ready closed
document.addEventListener('keydown', function (e) {
if (e.keyCode == 115) {
console.log('F4 pressed');
e.preventDefault();
}
});
I'm Trying to disable Ctrl++ / Ctrl+- browsers shortcuts via javascript :
$(document).ready(function(){
$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '107' || event.which == '109')) {
alert('disabling zooming ! ');
event.preventDefault();
}
});
});
This code is working great in FF and Chrome , and dosent prevent zooming in IE ! any idea ?
This works for me, though you may want to bind to 'keyup' also.
$(document).ready(function () {
$(document).bind('keydown keypress', function (event) {
event.preventDefault();
});
});
There are more than 2 button numbers you have to preventDefault in order to disable fully the scrolling.
Me personally I disable all ctrl key combinations.
$(document).ready(function () {
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
$(document).bind('keydown keypress', function (event) {
if (event.ctrlKey) {
preventDefault(event);
return false;
}
});
});
Having some problem cross browser. I need to Support IE7-9, my site is set to IE7 standards - cannot be changed. Then i need to support latest chrome, safari and firefox.
I want to hit a keyup event in a textbox on enter. Problem is i have a keypress event added to the form on that page which is submitting the form which i dont want to happen.
Sample application would be like this.
JAVASCRIPT:
$(document).ready(function () {
$("form").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#log1").append("Key press - Form event");
}
});
$("#myInput1").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code != 13) {
return true;
}
$("#log2").append("Enter pressed - input event");
//if (!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
//e.preventDefault();
}
});
$("#myInput1").bind("keyup", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code != 13) {
return true;
}
$("#log1").append("Key up - Enter pressed - input event");
});
});
HTML
<li onkeypress="alert('hi')">
<input id="myInput1" type="text" />
<div id="log1"></div>
<div id="log2"></div>
</li>
If i use e.preventDefault() - keyup event is not hit, if i dont use it, page is posting back.
I want to see "Key up - Enter pressed - input event" to be written to screen on pressing enter, across all browsers.
Any help would be appreciated. Thank you.
Finally was able to do it like this:
$(document).ready(function () {
$("form").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#log1").append("Key press - Form event");
}
});
$("#myInput1").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (e.keyCode != 13) {
return true;
}
$("#log2").append("Enter pressed - input event");
e.stopPropagation();
sampleE = e.keyCode;
$("#myInput1").trigger("keyup");
return false;
});
$("#myInput1").bind("keyup", function (e) {
if (!e.keyCode)
e.keyCode = sampleE;
if (e.keyCode != 13) {
return true;
}
$("#log1").append("Key up - Enter pressed - input event");
});
});
var sampleE = null;
I know this is not the best of the options but this is working. Thanks All.