What I want to accomplish: When the user presses the SPACEBAR the image source should change from spacebar.png to spacebar_pressed.png. When the user releases the key the image should change back to the default.
I have looked around everywhere and tried several possibilities but none worked. Bear in mind that I'm not very good with Javascript.
HTML:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/spacebar.js"></script>
</head>
<body>
<h1>Spacebar Simulator 2017</h1>
<img src="assets/spacebar.png" id="spacebar">
</body>
</html>
This is my most recent code I have tried:
$("#spacebar").on("keydown", function(e){
var code = e.keyCode;
if(code == 32){
document.getElementById("spacebar").src="../assets/spacebar_pressed.png";
}
});
You can combine keypress and attr function to accomplish such task.
In the callback, you have your event object, its attribute which is the keyCode, it represents the key that was pressed. The keyCode is 32 for spacebar.
When a key gets released on the DOM, the url changes again explicitly.
$(function() {
var myRealUrl = "http://hammerjs.github.io/assets/img/stackoverflow-icon.svg";
$("body").on("keydown", function(e) {
if (e.which == 32) {
$("#spacebar").attr("src", "https://i.stack.imgur.com/CE5lz.png");
console.log('pressed');
}
});
$("body").keyup(function(e) {
if (e.which == 32) {
$("#spacebar").attr("src", myRealUrl);
console.log('released');
}
});
});
/*Demo Use*/
img {
max-height: 100px;
max-width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://hammerjs.github.io/assets/img/stackoverflow-icon.svg" id="spacebar" />
Related
This link would launch a jupyter notebook.
When the page is loaded,
typing h, would launch a modal ("Keyboard shortcuts")
typing f, would launch another modal "Find and Replace"
How to have a page support to typing keyboard to launch a modal?
This link gives some inspiration inside modal.
This and this give examples about a single element, although I am asking an approach to listen keypress event on whole page
question
Here is my code which is trying to listen any keypress
<!DOCTYPE html>
<html>
<head>
<script>
i = 0;
$(document).querySelector('#myDiv').addEventListener('keyup', function (e) {
$("span").text(i += 1);
})
</script>
</head>
<body>
<div class="container" id="mydiv" tabindex="0">
<p>Keypresses: <span>0</span></p>
</div>
</body>
</html>
How to make this code work?
You are wiring the event incorrectly. With jQuery, use on() to wire the event and provide the selector for your target element in the second argument:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
i = 0;
$(document).on('keyup', '#mydiv', function(e) {
$("span").text(i += 1);
})
</script>
</head>
<body>
<div class="container" id="mydiv" tabindex="0">
<p>Keypresses: <span>0</span></p>
</div>
</body>
Of course, remember to click inside the element before you start typing. Now, if you want to know what key was pressed, you can use e.key. That's good if you want to get the characters, but if you want to implement shortcuts, it's better to use e.keyCode:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).on('keyup', '#mydiv', function(e) {
$("span").text(e.key + " (" + e.keyCode + ")");
})
</script>
</head>
<body>
<div class="container" id="mydiv" tabindex="0">
<p>Keypresses: <span>0</span></p>
</div>
</body>
maybe you should try this
document.addEventListener('keyup', function (event) {
if (event.defaultPrevented) {
return;
}
var key = event.key || event.keyCode;
console.log(key); // which "key" is the key you clicked on
// Then you should test which key is clicked so you can do whatever you want like so
if(key == 'Esc'){
//Do the magic
}
});
As the title says, when I add a keydown event listener in my javascript, pressing F-12 won't work.
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented){
return;
}
if (event.key == "w" || event.key == "ArrowUp"){
console.log("test");
}
event.preventDefault();
}, false);
This is the only thing I have to add inside my script tags in my HTML to prevent F-12 from working. The event listener is working tho, I am using the latest version of chrome. I am also importing THREE.js but not importing it doesn't change anything.
Here is the full raw HTML code, if it matters.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script> -->
<style>
body{
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- <script src="script.js"></script> -->
<script>
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented){
return;
}
if (event.key == "w" || event.key == "ArrowUp"){
console.log("test");
}
event.preventDefault();
}, false);
</script>
</body>
</html>
preventDefault(); prevents default behavior
i'm just starting a typing text project not for english typing text. it's only for Bengali language. my typing project is 99% done for english language but in Bengali language i found a tiny but a big problem.
i have a input box that will match all the word one by one. you type a word and press space it will check the word for matching and after that move for the next word. it's work fine.
how i check that:in inputbox oninput event event.data === " " than move to the next word.
but in Bengali language when i press the key "c" (not as first character but in the middle of word first character) its fired the oninput event multiple time. with various event.data value include the space also. that's why when press c in keyboard its just go to the next word.
now you cannot find out the multiple event in the console because you don't have the software in your machine. so for that i include a screen short of this:
see_the_picture_for_butter_understanding
onkeyup event problem: see_the_picture
<!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>Document</title>
</head>
<style>
#font-face {
font-family: 'SutonnyMj';
src: url('assets/fonts/SutonnyMj.ttf'),
url('assets/fonts/sutonnymj.woff2') format('woff2'),
url('assets/fonts/sutonnymj.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#textbox {
width: 200px;
height: 200px;
font-family: 'SutonnyMj';
font-size: 50px;
}
</style>
<body>
<textarea id="textbox" type="text"></textarea>
<script>
var textBox = document.getElementById("textbox");
textBox.oninput = function(e) {
console.log(event); // multiple event fire when the Software is Enable
if(event.data === " ") {
// move_to_the_next_word();
}
}
</script>
</body>
</html>
Notes: It's happen because i use a software called Bijoy Bangla for writing Bengali. (It's require for Bengali Typing Test)
As mentioned by #Ahmad 'input' event is fired after each change, but you can be more specific using 'keyup' event which will provide you more control and attributes for event object. For example you will be able to handle 'Space' using event.which statement. Here an example:
var textBox = document.getElementById("textbox");
textBox.onkeyup = function(e) {
console.log(event);
if(event.which === 32) { //space keycode
// move_to_the_next_word();
}
}
Try this!
function runScript(e) {
if (e.keyCode == 67) {//c
console.log("you have entred 'c' char")
}
if(e.keyCode == 32){//space
console.log("space ")
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="scriptBox" type="text" onkeyup="return runScript(event)" />
If you run this code snippet you will see a button. If you click on it, it will rotate. I have the exact same code in Visual Studio (as you can see in the picture below). However, when i debug the code or press 'view in browser (Google Chrome)' it doesn't work at all.
$("#rotate").click(function () {
if ($(this).css("transform") == 'none') {
$(this).css("transform", "rotate(45deg)");
} else {
$(this).css("transform", "");
}
});
body {
}
#rotate {
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/css.css" />
<script src="scripts/jquery-2.1.1.js"></script>
<script src="scripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button id="rotate"></button>
</body>
</html>
Did you wrap your button binding inside $(document).ready(function () { });? That is not clear from your example because it works fine if it is.
Or place your javascript code beneath the button without the &(document).ready function, that also works because if it is above the button the browser will try to bind a button that does not exits yet.
<script>
$(document).ready(function () {
$("#rotate").click(function () {
if ($(this).css("transform") == 'none') {
$(this).css("transform", "rotate(45deg)");
} else {
$(this).css("transform", "");
}
});
});
</script>
<style>
#rotate {
width: 100px;
height: 30px;
}
</style>
<button id="rotate" type="button">button</button>
Windows Virtual keyboard is not showing when app is running in touch mode (tablet device/simulator) and I'm manually triggering focus() on input. Instead keyboard shows when tapping anywhere on body (meaning that input is focused). Hoverer when running application as a regular desktop app with mouse input (instead of touch) - everything works well.
So the question is how to avoid such behaviour or at least how to manually display virtual keyboard when input is focused?
I'm using WinJS.4.0 4.0.0.winjs.2015.6.9.
Sample code to replicate the issue:
default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- App1 references -->
<link href="/css/default.css" rel="stylesheet" />
</head>
<body class="win-type-body">
<div id="container">
<div id="text-holder">
Input value will be displayed here
</div>
<div id="input-holder">
<form id="form">
<input id="input" value="" type="number"></input>
</form>
</div>
</div>
<script src="/js/default.js"></script>
</body>
</html>
default.js
(function () {
var input = document.getElementById('input');
var form = document.getElementById('form');
var textHolder = document.getElementById('text-holder');
form.addEventListener('submit', function (e) {
e && e.preventDefault();
textHolder.innerText = input.value;
input.value = "";
input.blur();
});
textHolder.addEventListener('click', function (e) {
console.log(e);
input.focus();
});
})();
default.css:
body {
background-color: #fff;
}
#container {
width: 100%;
height: 100%;
}
#text-holder {
width: 200px;
height: 50px;
background-color: #191A15;
color: #fff;
}
Visual guidance:
Step 1:
Step 2:
Thanks for your interest, hope this problem is solvable.
It is a known OS issue with winjs/uwp app running on a W10 (build 10.240). It has been fixed with W10 TH2 (build 10.586) as mentionned in the following MSDN thread