I'm trying to ignore Ctrl-C in my website but im stuck.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript">
function whichButton(event)
{
if (event.button==2)//RIGHT CLICK
{
alert("Not Allow Right Click!");
}
}
function noCTRL(e)
{
var code = (document.all) ? event.keyCode:e.which;
var msg = "Sorry, this functionality is disabled.";
if (parseInt(code)==17) //CTRL
{
alert(msg);
window.event.returnValue = false;
}
}
</script>
</head>
<body>
<form method="">
<strong>Not Allow Paste </strong><BR>
<input type="text" value="" onMouseDown="whichButton(event)" onKeyDown="return noCTRL(event)"/>
</form>
</body>
</html>
I tried this code, but it is can only ignore right click.
How can I ignore Ctrl-C?
Have a look at this website
But if someone wants to copy your content, they can. It will just make it harder and more time consuming to use.
And also
Regarding this Ctrl-C you could add javascript to block it, but it is useless, since the user can always disable javascript. In fact many users will find interception of right-click very annoying.
All these could have a meaning if you are building an intranet application or you can ship an integrated browser for users to view the application. With public html, I believe it isn't even worth trying. One solution would be to build your application with flash or another plug-in. This way you can encrypt everything you've sent to the client.
if your body tag adds these events
<body oncontextmenu="return noMenu();" onkeydown="return noKeys(event);">
and you then define these functions in your <head> section, you can take action when the context menu is activated (right click) or when keys are pressed on your page.
<script type="text/javascript">
function noMenu()
{
alert("Not Allow Right Click!");
return false;
}
function noKeys(event)
{
if (event == null) event = window.event;
// here you can check event.keyCode
return false;
}
</script>
Related
**I already fixed the problem, but I want to understand how it works (just for curiosity). I've been searching about this problem for long time and I didn't found the right source of information about this. Don't give me external links to 1990 websites, please. **
So basically, I wanted to call a function when user clicks enter button. I wanted to pass information about which button was pressed (in my HTML) to my function in external script.js file and check if it was button "Enter", so my program can proceed to next instructions. And i found something called Event Accesing and it did work actually, but explanation was so horrible that It works but i don't know why. Here's the code.
function myFunction(e) {
if (e.keyCode == 13) {
alert('It works!');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To-do list</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="entryText">
<h1>Good evening!</h1>
<h2>This is to-do list app written in plain javascript :)</h2>
<h2>Type your task and click enter on your keyboard</h2>
</div>
<div id="input-container">
<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(event);">
</div>
<script src="js/script.js" defer></script>
</body>
</html>
Michal while your script.js file is external to the HTML document when you include the script tag before you are importing the entire script.js code into the HTML document. So it is fair to say that this example below is how the browser will interpret the code (you could even write it like this):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To-do list</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="entryText">
<h1>Good evening!</h1>
<h2>This is to-do list app written in plain javascript :)</h2>
<h2>Type your task and click enter on your keyboard</h2>
</div>
<div id="input-container">
<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(event);">
</div>
<script>
function myFunction(e) {
if (e.keyCode == 13) {
alert('It works!');
}
}
</script>
</body>
</html>
The code myFunction(e) take a single parameter in your case you have used the letter 'e' to show that your function takes one parameter. We tend to use something that indicates what we're expecting to be passed to a function, in this case we are expecting and 'event', some people would write the function like this
myFunction(event)
myFunction(e)
Both 1 and 2 are the same but it's generally accepted in the programming community that 'e' stands for 'event' - when you're typing out code all day long it makes sense to shorted and abbreviate words so you can code faster, you could put anything you want like:
myFunction(thing)
...but that's not very helpful if you're someone trying to read someones code, where as 'e' or 'event' is descriptive enough to know that the function wants to be passed an 'event'.
On your line of code:
<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(event);">
you have:
onkeydown="myFunction(event);"
the 'onkeydown' part will fire every time a key is pressed, when a key is pressed it will emit an 'event' with lots of information including the key that was pressed. Your code is saying - when someone presses a key pass that information (the event) onto myFunction(event).
You could re-write the line of code like this:
<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(theInformationFromTheOnkeydownEvent);">
...the string 'theInformationFromTheOnkeydownEvent' isn't the actual 'event' information, it's just some word(s) we've chosen to show that something is being passed to the myFunction function, onkeydown will pass the event information to the myFunction because we've included some text between the parenthesis. If we didn't put anything between the parenthesis then the onkeydown would not pass any information to the myFunction() because we've explicitly told it not to by omitting text like this: myFunction()
Imagine:
onkeydown="myFunction(passTheOnkeydownEventOnToMyFunction)" <- passed info onto myFunction
onkeydown="myFunction()" <- does not pass any information onto myFunction
...the words inside the parenthesis in this case don't matter because the onkeydown is a DOM function (yes it's a function, and it returns event information) so when it's called it will return event information to what ever you want it to, in your case it's returning it to your myFunction.
When you look at your script.js file and the myFunction code you decided to put 'e' inside the parenthesis, you could have chosen 'event' or 'eventData'. The only important thing is that you use the same string throughout your myFunction code block, the three example below work the same and would work with your HTML code I've just changed the 'words' between the parenthesis (some are more descriptive than others):
function myFunction(e) {
if (e.keyCode == 13) {
alert('It works!');
}
}
function myFunction(event) {
if (event.keyCode == 13) {
alert('It works!');
}
}
function myFunction(thing) {
if (thing.keyCode == 13) {
alert('It works!');
}
}
function myFunction(eventData) {
if (eventData.keyCode == 13) {
alert('It works!');
}
}
I hope that makes things a little clearer?
You have attached onkeydown event listener on the input field. So, whenever a key is being pressed, your myFunction function is called with event data.
Such keyDown events carry a keyCode property and each key on keyboard has a unique JS keyCode. You can find the mapping over here. For enter key, key code is 13.
I've searched everywhere for many different ways of inserting text into a newly opened window with javascript within a function, yet none have seemed to work which leads me to believe I'm missing a key fundamental ingredient here.
function validate2() {
var valTxt = document.webPage.txt2.value;
if (valTxt == null || valTxt == "") {
alert("Field cannot be empty!");
return false;
}
if (valTxt.length < 5) {
alert("You must enter at least 5 characters!")
return false;
}
myWin = window.open('mypopup.html', "mywin", '');
myWin.getElementById('userText').innerHTML = valTxt;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exercise 3</title>
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<form name="webPage" action="http://thebest404pageever.com/">
Please type anything over 5 characters: <input type="text" name="txt2"><br/>
<input type="submit" name="b2" value="Confirm" onClick="return validate2()">
</form>
</body>
</html>
I have an empty HTML file for mypopup with just a h1 element with the id userText. The popup certainly shows up, but continuously shows blank. Is there anything I'm missing here? Thanks a lot.
myWin = window.open('mypopup.html', "mywin", '');
window.onload=function placeText(){
myWin.getElementById('userText').innerHTML = valTxt;
I appended it with this, and it doesn't look right and sure enough, doesnt work right either.
The loading of the new window is done asynchronously. As indicated in the MDN documentation:
Note that remote URLs won't load immediately. When window.open() returns, the window always contains about:blank. The actual fetching of the URL is deferred and starts after the current script block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.
You will need to defer your changes to the DOM until after they are loaded.
I would use a window.onload handler for this:
window.onload=function() {
myWin.getElementById('userText').innerHTML = valTxt;
};
I work on a small web app and I need to show confirm dialog after user refreshes his browser. I do it using window.onbeforeunload = function() { ...}. The problem is that it is invoked not only on refreshes but after submits as well. I have a question: can I find out somehow if window.onbeforeunload was caused by refresh or by a submit element?
You can write event handlers for various events that would navigate you away from the page and have an identifier to manage state. Then you can use this identifier in onbeforepageunload function to do whatever action you want to perform. Here is a code example that looks for input type submit and sets the identifier. Similarly you can have one for anchor tags and so on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<input type="submit" value="Submit">
</form>
</body>
<script>
var submit_was_clicked = false;
window.addEventListener("beforeunload", function (event) {
if(submit_was_clicked){
console.log('submit button clicked')
}else{
console.log('on before unload');
}
});
document.addEventListener("click", function(e) {
if (e.target.type.toLowerCase() === 'submit') {
submit_was_clicked = true;
}
}, true);
</script>
</html>
This isn't something I really want to do, just wondering if it's possible.
Say I have a page like this, which is just a heading and an input box.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>2014-4-24-01</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function jQuerySetup() {
if($) {
$(document).ready( function () {
$("body").on("keypress", "input", function ( event ){
if(event.keyCode == 13){
$("body").get(0).innerHTML = this.value;
}
});
});
} else {
window.setTimeout(jQuerySetup, 250);
}
}
jQuerySetup();
</script>
</head>
<body>
<h3>Test</h3>
<input type="text" width="20">
<div id="testDiv"></div>
</body>
</html>
If I type the following into the input box and hit enter, nothing happens. Why is that?
<script>window.setTimeout(function () { alert("Uh oh"); }, 1000);</script>
EDIT: And I know that it's very easy for someone to run JavaScript through the console window and achieve a similar effect. But my question is more of understanding why the above isn't possible (or why I'm not getting it right).
innerHTML won't execute the script, use jQuery html instead.
$("body").html(this.value);
It is possible to run script from an input box using eval(). The way you are doing it won't work since the specification states that scripts inserted via .innerHTML should not be executed (it's a large green note at the end of the section).
From the w3c spec...
Note: script elements inserted using innerHTML do not execute when they are inserted.
Instead just use eval
You don't need if($) { and setTimeout because it's handled by $(document).ready.
You can try that:
<script>
$(document).ready( function () {
$("body").on("keypress", "input", function ( event ){
if(event.keyCode == 13){
$("body").get(0).innerHTML = this.value;
}
});
});
</script>
Working example here
So, I would like to be able to have people click on a link, and the an input field with a file will open. But I only want this to happen if the browser has support for it. As pointed out in this answer, chrome supports this. Firefox 3.6 does not, but Firefox 4 should.
I know you can frequently test for support of features in javascript, but I'm unsure how to test for this feature.
If you'd like to see what I mean, the below code shows the feature when clicking on the link. You can also play with this on my page.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Field Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var clicker = document.getElementById('clicker');
var uploader = document.getElementById('uploader');
clicker.addEventListener("click", function(e) {
uploader.click();
e.preventDefault();
}, false);
});
</script>
</head>
<body>
<form>
<input type="file" id="uploader">
</form>
Should click the uploader
</body>
</html>
Things that do not work:
testing !uploader.click
seeing if uploader.click() throws an exception
You could use JQuery to dynamically write the HTML into the document at the appropriate place
$("#mylinkID").after('Whatever');`
and the link would be added after the element that contained the ID "mylinkID". If no support for JS, the link doesn't get displayed.