I am trying to get script src="jsmovermap1.js" to change to script src="jsmovermap2.js" when the user clicks UP on their keyboard. I seem to have this working when you look at page elements, but the page is not updating to the js source. Do you have any advice on how to overcome this?
Many thanks!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ireland Map</title>
</head>
<body>
<div id="map">
</div>
<script src="jquery-2.1.1.min.js"></script>
<script src="raphael-min.js"></script>
<script src="jsmovermap1.js" id="s1"></script>
<script>
x=1;
alert(x);
document.addEventListener('keydown', function (evt) {
if (evt.keyCode === 38) {
alert('The "UP" key is being held down...?');
x=x+1;
alert(x);
s1.src="jsmovermap"+(x)+".js"
//s1.src = s1.src.replace("jsmovermap1.js","jsmovermap"+(x)+".js");
}
if (evt.keyCode === 40) {
alert('The "DOWN" key is being held down...?');
x=x-1;
if(x<0){
x=0}
alert(x);
}
});
</script>
</body>
</html>
Related
I want to get run a function when I press the w key, I found some solutions but was not able to figure our where to place that code. Also I want it to be executed no matter when I press w as long as I'm on the same web page.
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<input type="text" onkeydown="keyPressed()">
</head>
<body>
<div id="screen">
</div>
</body>
<script src="main.js"></script>
</html>
Javascript
function keyPressed() {
// this doesn't run.
}
If I made a mistake then please tell me it and if I didn't make a mistake why doesn't it work?
If I understand correctly you want to "listen" for a keydown event and specifically listen for w.
Below is code that does this without an input.
You will have to click in the window to make it work (on a web page it should work without needing to click in the window.)
function ready(callbackFunction){
if(document.readyState != 'loading')
callbackFunction(ev)
else
document.addEventListener("DOMContentLoaded", callbackFunction)
}
ready(ev => {
console.log('DOM is ready.');
// code above checks that the DOM is loaded and ready
// addEventListener on the window and listen for keydown
window.addEventListener("keydown", function(e) {
// Next 4 lines listen for the key and print it to the screen, not really needed.
let str = "KeyboardEvent: key='" + event.key + "' | code='" + event.code + "'";
let el = document.createElement("span");
el.innerHTML = str + "<br/>";
document.getElementById("screen").appendChild(el);
// this listens for w, add your function in here.
if (event.key == "w") {
alert('You pressed lowercase w');
}
}, true);
})
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project</title>
</head>
<body>
<main>
Click in this window to make active. <br>
Then keydown and the key & keycode will show. <br>
keydown lowercase w and it will alert.
<div id="screen"> </div>
</main>
</body>
</html>
I got a textbox on my form. I want the users to not have the ability to press space in the keyboard. I'm using the code below to disable spacing. I don't understand why it isn't working.
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
<script>
function noSpaces()
{
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
}
</script>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb" onkeydown="noSpaces()">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
</script>
</html>
The onkeydown event subscribes to the noSpaces function which then re-subcribes using jquery for input for keydown. Pick one or the other but do not subscribe multiple times because now you add a new subscription with every event call.
Added CDN reference to jquery
$(document).ready(function(){
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
})
I guess this code is enough for you you don't need to define onkeydown="noSpaces()" and noSpaces function
I prefer would use keyup and would solve it like this:
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$("input").on("keyup", function (e)
{
$(this).val($.trim($(this).val()));
});
</script>
You have not included jquery library. You first have to include that and then this will work.
$("input").on("keydown", function (e) {
return e.which !== 32;
});
I have tried the tutorial are there, but still could not work, what's wrong with my code?
Parent Page Script:
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
$(function() {
var money = 20000;
$("#iframe1").contents().find("#nominal").on("change keyup", function() {
var input = $(this);
// remove possible existing message
if( input.next().is("form") )
input.next().remove();
// show message
if( input.val() > money )
alert('Hello');
});
});
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
Iframe script:
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
please tell me what was wrong, thanks advance.
In your HTML page
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
var money = 20000;
function my_custom_function(input)
{
// remove possible existing message
if( input.next().is("form") ) input.next().remove();
// show message
if( input.val() > money ) alert('Hello');
}
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
In your iframe code
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
<script>
$(function() {
$("#nominal").change("change", function() {
parent.my_custom_function($(this));
});
$("#nominal").change("keyup", function() {
parent.my_custom_function($(this));
});
});
</script>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
Hope this trick will be helpful to you.
You have two possible scenarios:
if you can modify iframe page;
if you can't.
Your problem is that when your javascript run, the content of iframe could be not available, so JQuery cannot "attach" to child controls.
If you can change your iframe code, you can add this script to your iframe page
window.onload = function() {
parent.iframeLoaded();
}
and obviously on the parent page you must change your code to
$(function() {
var money = 20000;
window.iframeLoaded = function() {
$("#iframe1").contents().find('#nominal').on('keyup', null, function(event) {
var input = $(this);
// show message
if( input.val() > money )
alert('Hello');
});
}
});
});
If you instead cannot change iframe html, you cannot bind to keyup event of controls but you can bind to iframe one, so in this case you need to bind keyup of iframe and then filter for #nominal originated event, and your code should be like this
$(function() {
var money = 20000;
$("#iframe1").contents().on('keyup', null, function(event) {
if(event.target.id === 'nominal'){
var input = $("#iframe1").contents().find('#nominal');
// show message
if( input.val() > money )
alert('Hello');
}
});
});
How I can call "click" event on input type="file" by calling "context" event on other element?
I am trying this code:
HTML Markup:
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<input type="file" id="file"/>
<button id="trigger">Click</button>
</body>
JavaScript file:
window.onload = function() {
window.oncontextmenu = function(){
return false;
};
$("#trigger").on("contextmenu", function(){
$("#file").trigger("click");
});
}
But I haven't got window to choose file, when I click the right mouse button on button with id="trigger".
Resolved!
window.onload = function() {
$("#trigger").mousedown(function(e){
if(e.button == 2){
$("#file").trigger("click");
}
});
}
try like this:
Script:
$('#trigger').click(function() {
$('#file').trigger('click');
});
hi2all i need to handle only the enter button event but my code handle enter even when i click
another button with it
for example when i click Shift+enter from kb it handle click i want to prevent such thing
i want to handle pressing enter alone
{____________
another issue
i want to add new line after each appended text
my code is here
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button1").click(function() {
$(this).attr("disabled", true);
});
$("#entr").keypress(function(e) {
if (e.which == 13) {
alert("enter pressed");
$("#texts").append($("#entr").val());
}
});
});
</script>
</head>
<body>
<div id="m" style="background-color: darkorange;">click me to change webpage background</div>
<input id="entr" type="text" value="enter some text here" />
<input id="button1" type="button" value="me" />
<p id="texts">text in text box will appended here
<br />
</p>
</body>
</html>
<script type="text/javascript">
//change the color of webpage when clicking the div
var x = document.getElementById("m");
x.addEventListener("click", function() {
document.body.style.backgroundColor = "darkturquoise";
});
</script>
Here's what you need to do. Bind your event keypress to the body.
jQuery(document).ready(function(){
jQuery('body').on('keypress', function(e){
// We are looking for the action "enter"
if(e.which == 13){
// Must not be with shift
if(event.shiftKey !== true){
alert(' Enter ! ');
}
}
});
});
To add a new line, you have to append MyVar = MyVar + '<br />'+"\r\n";
////will work for shift+enter
if (event.keyCode == 13 && event.shiftKey) {
}
How do I detect "shift+enter" and generate a new line in Textarea?