How to disable esc and window keys in Javascript - javascript

I want when user enables full screen mode then user can't use any keyboard key, which means I will disable all keys when user enter in full screen mode. Please help me to solve this problem.
<pre><!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$(document).keydown(function (event) {
return false;
});
});
document.oncontextmenu = function (e) //check for the right click
{
return false;
}
document.ondragstart = function (e)
{
return false;
}
function toggleFullScreen() {
var docElm = document.documentElement;
if ((document.fullScreenElement && document.fullScreenElement !== null) ||(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}
else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
</script>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<input type=text id="text"/>
<button onclick="toggleFullScreen()" value="toggleFullScreen"
name="toggleFullScreen">toggleFullScreen</button>
</body>
</html>
</pre>
In above code I will add a toggler button to enable full screen mode and also place code for disable keyboard key full screen mode will be work and keyboard key is also working but ESC and Window key can't be disabled. Please help me to solve this problem.

Update your keydown code as follows
$(document).ready(function () {
$(document).keydown(function (event) {
var charCode = event.charCode || event.keyCode || event.which;
if (charCode == 27 || charCode == 91 || charCode == 92) {
alert("Escape and window keys are not allowed");
return false;
}
});
});

Well, if-else always looks a good idea in this situation but I will prefer this way. More readable and better approach
document.attachEvent("onkeydown", win_onkeydown_handler);
function win_onkeydown_handler() {
switch (event.keyCode) {
case 91: // 'Left Window'
event.returnValue = false;
event.keyCode = 0;
break;
case 27: // 'Esc'
event.returnValue = false;
event.keyCode = 0;
break;
case 92: // 'Right Windows'
event.returnValue = false;
event.keyCode = 0;
break;
break;
}
}
Modify it the way you want and you can see full list of key codes here

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.

change action of 'Save Image As' to redirect to appropriate webpage

I am looking for a way to change the behavior of 'Save Image As' when people try to download the small logo files from my website. I don't mind them using my logo, but I would prefer that the get the one from my actual downloads page so it is good quality.
Ideally I would like to be able to set a css class up so I can apply the behavior to specific images. I don't need it to be on every image on the site.
when someone visit your website, images are downloaded and saved in the cache folder.
but you can disable Right Click mouse on your site to prevent people to Save Image:
<script>
document.onmousedown=disableclick;
status="Right Click Disabled";
function disableclick(event)
{
if(event.button==2)
{
alert(status);
return false;
}
}
</script>
but remember people still can access to your logo. but harder.
document.onmousedown=disableclick;
status="Right Click Disabled";
function disableclick(event)
{
if(event.button==2)
{
alert(status);
return false;
}
}
<p>some thing</p>
You can prevent the right click and ctrl+u etc for preventing your logo to be saved by others. You can put this code on your head part:
<script type="text/javascript">
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if(((e.which == 85) || (e.which == 117) || (e.which == 65) || (e.which == 97) || (e.which == 67) || (e.which == 99)) && isCtrl == true)
{
// alert(‘Keyboard shortcuts are cool!’);
return false;
}
}
</script>

Hiding div with cookies after a second visit user

Hello friends have tried hard and not found how do I thank for the help now.
I want to hide a div with cookies after a second visit of the user that is when the User visit the page div appears later when the User leave the page and return the div does not appear.
Here my code:
jQuery(document).mousemove(function(e){
if( document.activeElement && document.activeElement.tagName == 'IFRAME' ){
jQuery.post(window.location.href, {click: 1});
document.getElementById('mime').remove();
}
});
jQuery(document).bind("contextmenu",function(e){jQuery("#mime").remove();});
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
jQuery("#mime").hide();
return false;
}
}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
jQuery("#mime").hide();
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
jQuery("#mime").hide();
return false;
}
}
<div id="mime" style="position:absolute; z-index:99999999999999; opacity:0.0; filter: alpha(opacity=0) ">
<script type='text/javascript'>
habilita=true;
if(document.all){}
else document.captureEvents(Event.MOUSEMOVE);document.onmousemove=mouse;function mouse(e)
{if(navigator.appName="Netscape"){xcurs=e.pageX;ycurs=e.pageY;}else{xcurs=event.clientX;ycurs=event.clientY;}
if(habilita){ document.getElementById("mime").style.left=(xcurs-230)+"px";document.getElementById("mime").style.top=(ycurs-150)+"px";}}
</script>
</div>
You can use js-cookie
Show modal only if modalShown value is undefined
if (!Cookies.get('modalShown')) {
// show modal
}
Save to cookies when user visits a page
Cookies.set('modalShown', true);

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

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;

Disable Ctrl+A,Ctrl+C key functions to HTMl page [duplicate]

This question already has answers here:
How can i disable the ctrl + a using javascript?
(3 answers)
Closed 9 years ago.
How do I disable Ctrl+A and ctrl+C keys to my whole page? I want to disable Copy, paste functionality from the keyboard. I found a few links which disable only one textbox. but I want to disable the ctrl functionality to the whole HTML page.
I pasted the below code in tag and added the disablePage in body onload function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>html2canvas example</title>
<script type="text/javascript" src="img/html2canvas.js"></script>
<script language=JavaScript>
function ieClicked() {
if (document.all) {
return false;
}
}
function firefoxClicked(e) {
if(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=firefoxClicked;
}else{
document.onmouseup=firefoxClicked;
document.oncontextmenu=ieClicked;
}
document.oncontextmenu=new Function("return false")
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
<style>
canvas{border:1px solid #222}
</style>
</head>
<body>
<a class="upload" >Upload to Imgur</a>
<a href="#" download="canvasexport.pdf" onclick="window.print()" ><img src="images/print-icon.png" alt="Print" width="16" height="16" ></a>
<a href="#" id="download" download="diversio.pdf" onclick="printImg();">
<img src="images/print-icon.png" alt="Print" width="16" height="16" >
</a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<p> Feedback form with screenshot This script allows you to create feedback forms which include a screenshot,
created on the clients browser, along with the form.
The screenshot is based on the DOM and as such may not be 100% accurate to the real
representation as it does not make an actual screenshot, but builds the screenshot based on the
information available on the page. How does it work? The script is based on the html2canvas library,
which renders the current page as a canvas image, by reading the DOM and the different styles applied
to the elements. This script adds the options for the user to draw elements on top of that image,
such as mark points of interest on the image along with the feedback they send.
It does not require any rendering from the server, as the whole image is created on the clients browser.
No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
</body>
</html>
Try this out:
function disableselect(e) {
return false;
}
function reEnable() {
return true;
}
document.onselectstart = new Function("return false");
if (window.sidebar) {
document.onmousedown = disableselect;
document.onclick = reEnable;
}
Place this in your <head> tags and the user cannot select text on your page.However, there is no guarantee way to prevent your contents from being stolen.The JavaScript above can be easily bypassed by an experience internet user. E.g. If the browser's JavaScript is disabled, the code will not work. Working copy is available in here.
<html>
<head>
</head>
<body onkeypress="return disableCtrlKeyCombination(event);" onkeydown = "return disableCtrlKeyCombination(event);" >
how to disable the mouse right click and Ctrl +C in your web page ?
<script language=JavaScript>
<!--
//Disable right mouse click Script
var message="Function Disabled!";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("return false")
function disableCtrlKeyCombination(e)
{
//list all CTRL + key combinations you want to disable
var forbiddenKeys = new Array('a', 'c', 'x', 'v');
var key;
var isCtrl;
if(window.event)
{
key = window.event.keyCode; //IE
if(window.event.ctrlKey)
isCtrl = true;
else
isCtrl = false;
}
else
{
key = e.which; //firefox
if(e.ctrlKey)
isCtrl = true;
else
isCtrl = false;
}
//if ctrl is pressed check if other key is in forbidenKeys array
if(isCtrl)
{
for(i=0; i<forbiddenKeys.length; i++)
{
//case-insensitive comparation
if(forbiddenKeys[i].toLowerCase() == String.fromCharCode(key).toLowerCase())
{
alert('Key combination CTRL + ' +String.fromCharCode(key)+' has been disabled.');
return false;
}
}
}
return true;
}
// -->
</script>
</body>
</html>
In Script it will detect ctrl + a,ctrl + A,ctrl + c,ctrl + C, ctrl + u,ctrl + U
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if(((e.which == 85) || (e.which == 117) || (e.which == 65) || (e.which == 97) || (e.which == 67) || (e.which == 99)) && isCtrl == true)
{
// alert(‘Keyboard shortcuts are cool!’);
return false;
}
}

Categories

Resources