JqueryMobile (SPA) Disable Browser backbutton and Refresh? - javascript

hi i am using jqueryMobile SPA template for my phone-gap app.
For web version my requirement is to disable or show warning message to user on click of browser back button. I googled my requirement but didn't find any desired solution.Please guide me . Thanks.

Try this-
FIDDLE
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if ( !! direction) {
alert(direction);
}
});
Please refer following link.
Refer This
Or you can use
window.history.forward(1);
when back button get pressed. But it loads and then redirected not proper way.

To disable Backbutton of browser i used
$(window).on("navigate", function (event) {
event.preventDefault();
window.history.forward(1);
});
But on pressing f5 it was creating error and redirecting me to login page.Thus i disable f5 ,ctrl+R button.
var ctrlKeyDown = false;
$(document).on("pagecreate", function (){
$(document).on("keydown", keydown);
$(document).on("keyup", keyup);
});
function keydown(e) {
if ((e.which || e.keyCode) == 116 || ((e.which || e.keyCode) == 82 && ctrlKeyDown))
{
// Pressing F5 or Ctrl+R
e.preventDefault();
} else if ((e.which || e.keyCode) == 17) {
// Pressing only Ctrl
ctrlKeyDown = true;
}
}
function keyup(e){
// Key up Ctrl
if ((e.which || e.keyCode) == 17)
ctrlKeyDown = false;
}
It completely fulfilled my requirement.Thanks to Suhas :) .

Related

How to disable View source and inspect element

How do you disable/ view source/ and /inspect element/, ctrl + u ctrl+shift+I f12 menu bar and right click, also ctrl + s ctrl p ctrl+v ctrl+a ctrl+c and drag select page, please answer all parts that's possible, I prefer to do this will JavaScript array keycodes or html no php or other languages.also I want to block ifram use on my site like somesites such as google.
As I understand it is not possible to completely disable view source and inspect element, so I want minification of code and rest of my question answered instead.
Edit:
I solved alot of it myself, I used onkeydown return false to disable all keys, still need the arrays, I disabled inspect element menu bar by forcing browser to window.open I still need right click, however would like to add that I need a custom right click menu, I disabled the possibility to disable Javascript in order to stop the key block by using noscript function redirects. I also still need the drag and select part. I would still like betterways to fix it...maybe even just minify the code or encrypt it. Of anyone needs some of the code I used just reply. I just need to fix it.
It is not possible to prevent the user from inspecting code running on their machine. At the end of the day the HTMl they are getting delivered will be readable in plain text. You can cause a nuisance for most people, but this will not be a valid security measure - chrome extensions will still run, for instance, so if someone is using the NoScript extension it will disable all javascript.
A much better option would be to handle your logic serverside, and only send the client the information they need to know/requested.
There are some free javascript obfuscators, such as https://javascriptobfuscator.com/. Please remember that it is not a secure method, though.
I mean no matter how much you block it a person can just type
view-source:https://example.com
document.onkeydown = function(e)
{
if(event.keyCode == 123)
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0))
{
return false;
}
}
e is a keyboard event. e.[key] returnes true if key pressed.
If document.onkeydown returns false, key doesn't count.
This programm seeing if code view combination pressed and returning false.
Example. if ctrl, shift and 'J' pressed - return false.
Bump
To the people saying it isn't possible, how would you recon this website managed to do so?
The following website disabled, view source, right click and the dev console.
I am genuinely interested.
https://www.techgyd.com/contact-facebook-directly/6579/
Edit:
all input from keyboard is disabled, but by adding "view-source:" before the httpps:// to the url to become:
view-source:https://www.techgyd.com/contact-facebook-directly/6579/
makes me able to see.
If you would like to know how they did that then take a look at their JS, raw copy/paste:
<script type="text/javascript">
//<![CDATA[
var show_msg = '';
if (show_msg !== '0') {
var options = {view_src: "View Source is disabled!", inspect_elem: "Inspect Element is disabled!", right_click: "Right click is disabled!", copy_cut_paste_content: "Cut/Copy/Paste is disabled!", image_drop: "Image Drag-n-Drop is disabled!" }
} else {
var options = '';
}
function nocontextmenu(e) { return false; }
document.oncontextmenu = nocontextmenu;
document.ondragstart = function() { return false;}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode === 123) {
if (show_msg !== '0') {show_toast('inspect_elem');}
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
//alert(event.keyCode); return false;
if (event.keyCode === 123 ||
event.ctrlKey && event.shiftKey && event.keyCode === 73 ||
event.ctrlKey && event.shiftKey && event.keyCode === 75) {
if (show_msg !== '0') {show_toast('inspect_elem');}
return false;
}
if (event.ctrlKey && event.keyCode === 85) {
if (show_msg !== '0') {show_toast('view_src');}
return false;
}
}
function addMultiEventListener(element, eventNames, listener) {
var events = eventNames.split(' ');
for (var i = 0, iLen = events.length; i < iLen; i++) {
element.addEventListener(events[i], function (e) {
e.preventDefault();
if (show_msg !== '0') {
show_toast(listener);
}
});
}
}
addMultiEventListener(document, 'contextmenu', 'right_click');
addMultiEventListener(document, 'cut copy paste print', 'copy_cut_paste_content');
addMultiEventListener(document, 'drag drop', 'image_drop');
function show_toast(text) {
var x = document.getElementById("amm_drcfw_toast_msg");
x.innerHTML = eval('options.' + text);
x.className = "show";
setTimeout(function () {
x.className = x.className.replace("show", "")
}, 3000);
}
//]]>
</script>
or just look from line 86
I hope it helps

Able to detect Ctrl+R But stop reloading page

I am able to detect Ctrl+R but unable to stop reloading page.
Please help me to fix this.
I am using this code.
$(document).keydown(function(e) {
if (e.keyCode == 65+17 && e.ctrlKey) {
alert('ctrl R');
exit;
return ;
}
});
Thanks in advance.
The standard / clean way to help user prevent unwanted page reload is via beforeunload and not via overriding key event, which is, in fact, futile: you do not know what key combination invoked page reload (for instance, f5 works alike in most browsers), he may press CTRL+R with locationbar focused so your page gets no event to capture, he may have pressed toolbar button…
Mentioned standard approach from linked MDN page
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
return confirmationMessage; // Gecko, WebKit, Chrome <34
});
This will prompt user whenever he tries to reload / close / navigate away from your page no matter what initiated unload.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function () {
document.onkeydown = KeyPress;
function KeyPress(e) {
console.log(e);
var press = window.event? event : e
if (press.keyCode == 82 && press.ctrlKey) alert("Ctrl+R");
if ($.browser.mozilla) {
if (e.ctrlKey && keycode == 82) {
if (e.preventDefault)
{
e.preventDefault();
e.stopPropagation();
}
}
}
if ($.browser.msie) {
if (window.event.ctrlKey && press.keycode == 82) {
window.event.returnValue = false;
window.event.keyCode = 0;
window.status = "Refresh is disabled";
}
}
}
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

Ignore keyup for a few seconds for ux

I have a multistep form using jquery validator plugin that also goes to the next page when you press enter.
function showPage(pg){
$('formError').empty();
$('table:visible').hide();
$('#page-' + pg).show();
$('input[type="text"]:visible').focus();
}
$(document).keydown(function(e) {
if(e.which == 13) {
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}}});
The issue is that if you use the enter button, it triggers a validation error on the next page because the button is still being pressed and it tries to go to the next page.
How can I ignore the enter key for a small period so that releasing the enter key works to go to the next page without attempting to go to the page after the next page?
You can wait for the corresponding keyup event before taking in account a new keydown event for the enter key.
pressed = {};
$(document).keydown(function(e){
if(pressed[e.which] == null && e.which == '13'){
if($('#msform :input:visible').valid()) {
page++;
showPage(page);
}
}
pressed[e.which] = true;
});
$(document).keyup(function(e) {
pressed[e.which] = null;
});
You can use setTimeout() function like this
$(document).keydown(function(e) {
setTimeout(myFunction(),500);
});
function myFunction(){
if(e.which == 13) {
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}}
}
::::::::::::::::::Update::::::::::::::::::
$(document).keydown(function(e) {
if(e.which == 13) {
setTimeout(myFunction(),500);
}
});
function myFunction(){
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}
}

Cannot catch enter button on Virtual keyboard of HTC phones

Currently, I am using HTML, js with phonegap to write an Android application. This is the function I use to catch the enter button on the virtual keyboard:
function handleFormKeypress(e)
{
var currentInputElement = $(e.target);
if(e.keyCode == 13 || e.keyCode == 10)
{
Log("handleFormKeypress - Go pressed")
//this needs to be checks as passing in the 'submitButton' is optional
if (e.data != undefined)
{
if (e.data.handler != undefined)
{
e.data.handler();
}
}
currentInputElement.blur();
e.stopImmediatePropagation();
return false;
}
}
As you can see, I catch the keycode of the keyboard. Converting to Android app using Phonegap, it should catch the Go button, or the Next button of the Virtual keyboard.
My input field's type is number:
<input type="number" id="blah blah blah"/>
In this situation, the android virtual keyboard display an numberic keyboard with the next button.
I tested on several Android phones. When I click to the next button, it jump to the next page as I expected. But on some HTC phones, in fact, the HTC Nexus One and the HTC One X, it does nothing.
Anybody has some ideas here?
Thanks in advance.
How about using both e.keyCode and e.which?
Add an inline if statement to check for both:
function handleFormKeypress(e)
{
var currentInputElement = $(e.target);
var keyCode = (e.keyCode ? e.keyCode : e.which);
if(keyCode == 13 || keyCode == 10)
{
Log("handleFormKeypress - Go pressed")
//this needs to be checks as passing in the 'submitButton' is optional
if (e.data != undefined)
{
if (e.data.handler != undefined)
{
e.data.handler();
}
}
currentInputElement.blur();
e.stopImmediatePropagation();
return false;
}

Simulate multiple keypresses in javascript

I would like to simulate the user pressing tab then enter when they press enter. I know this sounds bad, but I have an asp.net web application that will only allow me to have one form with runat="server" on it so when the user hits return the main form gets submitted. I have another textbox on the page though (that ideally should have it's own form but can't because it is asp), and when enter is hit from there obviously the main form is submitted. The simplest way I could think is to simulate tab then enter using javascript, but I have been unsuccessful in that. I am welcome to any other solutions to this problem. So far I have simulated pressing tab, but I don't know how to simulate more than one keypress though.
Here is the code I have so far, I imagine return 9; needs to be replaced with something else. JQuery will also do.
function suppressEnter (e) {
var keyPressed;
if (window.event) { keyPressed = window.event.keyCode } // IE
else if (e) { keyPressed = e.which }; // Netscape
if (keyPressed == 13) {
return 9;
}
else {
return true;
}
}
EDIT: return 9 + 13; works in chrome, but not IE
Something like this would work:
function keyPress(e) {
if (e.which == 13) {
$(document).trigger(jQuery.Event('keydown', {which: 9}));
// do something
alert('Enter')
}
if (e.which == 9) {
// do something
alert('Tab');
}
};
$(document).bind("keydown", keyPress);
I've coded it up in a fiddle - http://jsfiddle.net/FAe6U/
Also With regards to #nnnnnn comment:
It seems to me you should just code that directly rather than trying
to simulate keystrokes.
Try this:
var tabPress;
function keyPress(e) {
if (e.which == 13) {
if (tabPress == 1){
e.preventDefault();
alert('tab and enter');
}
else{e.preventDefault(); alert('enter')}
}
else if (e.which == 9) {
e.preventDefault();
tabPress = 1;
};
};
function keyRelease(){tabPress = 0;}
$(document).bind("keydown", keyPress);
$(document).bind("keyup", keyRelease);
I've coded it up in a fiddle - http://jsfiddle.net/f4Ybn/

Categories