1
Sie müssen zuerst klicken anywere so shift Drücken wird registriert.Javascript - nach Drücken der Taste bleibt in einem gedrückten Zustand (gibt True zurück)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title>Display Coloring</title>
<script src="jquery-2.2.1.min.js"></script>
<style type="text/css">
div {
background-color: rgb(0, 0, 0);
width: 20px;
height: 20px;
left: 0;
top: 0;
bottom: 0;
line-height: 0;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
body {
top: 0;
left: 0;
bottom: 0;
margin: 0;
padding: 0;
margin: 0;
width: 1920px;
height: 1080px;
}
div:hover {
background-color: rgb(0, 0, 0);
background-color: rgba(255, 0, 0, 0.5);
}
input {
float: left;
width: 20px;
height: 20px;
top: 0;
left: 0;
bottom: 0;
padding: 0;
-webkit-appearance: none;
background-color: rgba(0, 0, 0, 0);
box-shadow: none !important;
outline: none;
border: none;
word-spacing: 0;
letter-spacing: 0;
}
#conDiv {
width: 1920px;
height: 1080px;
background-color: transparent;
position: absolute;
z-index: 1;
}
#conInput {
width: 1920px;
height: 1080px;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<script>
var body = document.body;
a = [];
b = [];
c = [];
i = [];
d = [];
clicked = [];
altDown = false;
window.onload = function() {
conInput = document.createElement('div');
conInput.setAttribute('id', 'conInput');
document.body.appendChild(conInput);
conDiv = document.createElement('div');
conDiv.setAttribute('id', 'conDiv');
document.body.appendChild(conDiv);
//for(u=0;u<1911;u+=10){
for (u = 0; u < 1901; u += 20) {
a.push(u);
for (v = 0; v < 1061; v += 20) {
//for(v=0; v<1071; v+=10){
b.push(v);
var newDiv = document.createElement("div");
newDiv.id = b.length - 1;
conDiv.appendChild(newDiv);
}
}
//for(u=0;u<1911;u+=10){
// \t for(v=0; v<1071; v+=10){
for (u = 0; u < 1901; u += 20) {
for (v = 0; v < 1061; v += 20) {
c.push(v);
var newInput = document.createElement("input");
newInput.setAttribute('type', 'color');
newInput.id = c.length - 1;
conInput.appendChild(newInput);
}
}
function marking() {
$("body").on("keydown keyup", function(event) {
if (event.type == "keydown") {
console.log(event.type);
$('div').hover(function() {
if (event.keyCode == 16 && this.id !== "conDiv" && this.id !== "conInput") {
clicked.push(this);
this.style.backgroundColor = "#b3ffb3";
console.log(event);
}
})
} else {
console.log(event);
$('div').hover(function() {
if (event.keyCode == 16) {
//if() \t \t \t \t
if (this.id !== "conDiv" && this.id !== "conInput") {
this.style.backgroundColor = "#000000";
//console.log(event.shiftKey);
}
}
})
}
})
}
function changeColor() {
divs = body.getElementsByTagName('div');
inputs = body.getElementsByTagName('input');
for (var l = 0; l < inputs.length; l++) {
if (inputs[l].id !== "conInput") {
i.push(inputs[l]);
}
}
for (var k = 0; k < divs.length; k++) {
if (divs[k].id !== "conDiv" && divs[k].id !== "conInput") {
d.push(divs[k]);
}
}
$(document).ready(function() {
$("body").bind("keydown", function(event) {
if (event.altKey) {
for (var h in d) {
//if(d[h].id == "10272" && altDown == false){
if (d[h].id == "2544" && altDown == false) {
d[h].style.opacity = "0.4";
altDown = true;
}
//else if(d[h].id == "10272" && altDown == true) {
else if (d[h].id == "2544" && altDown == true) {
d[h].style.opacity = "1";
altDown = false;
}
}
}
});
});
$('div').on('click', function() {
if (this.id != "conDiv" && this.id != "conInput") {
if (event.ctrlKey) {
clicked.push(this);
for (var h in d) {
if (d[h].id == this.id) {
$(d[h]).css('background-color', 'rgba(255, 255, 102, 0.8)');
}
}
} else if (clicked.length > 0) {
for (var clk in clicked) {
target = document.getElementById(this.id);
$(target).click();
$(target).on('change', function() {
newColor = this.value;
parsed = newColor.charAt(0) == "#" ? newColor.substring(1, 7) : newColor;
r = parseInt(parsed.substring(0, 2), 16).toString();
g = parseInt(parsed.substring(2, 4), 16).toString();
b = parseInt(parsed.substring(4, 6), 16).toString();
newColorRGB = "(" + r + ", " + g + ", " + b + ")";
for (clk in clicked) {
clicked[clk].style.backgroundColor = newColor;
clicked[clk].setAttribute("title", newColorRGB);
}
clicked = [];
});
}
} else if (clicked.length == 0) {
for (var z in i) {
if (i[z].id == this.id) {
target = document.getElementById(this.id);
$(target).click();
$(target).on('change', function() {
newColor = this.value;
parsed = newColor.charAt(0) == "#" ? newColor.substring(1, 7) : newColor;
r = parseInt(parsed.substring(0, 2), 16).toString();
g = parseInt(parsed.substring(2, 4), 16).toString();
b = parseInt(parsed.substring(4, 6), 16).toString();
newColorRGB = "(" + r + ", " + g + ", " + b + ")";
for (var h in d) {
if (d[h].id == this.id) {
d[h].style.backgroundColor = newColor;
d[h].setAttribute("title", newColorRGB);
}
}
});
}
}
}
}
});
}
changeColor();
marking();
}
</script>
</body>
</html>wenn ich drücken shiftKey es funktioniert und die div-Tags erhalten ihre Farbe, aber wenn ich loslassen shiftKey der Zustand bleibt wahr und es hält Färbung, bis eine Auffrisch . Hier
ist der Code:
function marking(){
$("body").bind("keydown", function(event) {
$('div').hover(function(){
if(event.shiftKey){
if(this.id !== "conDiv" && this.id !== "conInput"){
clicked.push(this);
this.style.backgroundColor = "#b3ffb3";
console.log(event.shiftKey);
}
}
else{};
}
})
});
}
Kann ich irgendwie das Programm sagen, auf die Freisetzung von shiftKey reagieren?
UPDATE
$("body").on("keydown keyup", function(event) {
if(event.type == "keydown"){
$('div').hover(function(){
if(event.keyCode == 16 && this.id !== "conDiv" && this.id !== "conInput"){
clicked.push(this);
this.style.backgroundColor = "#b3ffb3";
console.log(event);
}
})
}
else{
console.log(event);
$('div').hover(function(){
if(event.keyCode == 16){
if(this.id !== "conDiv" && this.id !== "conInput"){
this.style.backgroundColor = "#000000";
}
}
})
}
})
Jetzt ändert sich die Farbe auf shiftKey und ändert die Farbe auf keyup-000,000 #. Aber es bleibt immer noch auf keydown und wenn ich über einen div schweben schiebt es das Objekt in mein Array ohne zu färben.
Ich möchte, dass es beim Drücken von Shift und nichts beim Loslassen der Shift-Funktion farbig wird.
Was fehlt mir?
geändert habe ich denke, es ist ein Syntaxfehler in diesem Snippet – tforgione
Sie sollten die HTML-Post und erstellen Sie ein Snippet, in dem wir Ihren Code ausführen können. https: // Blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ –
@Juan Mendes der Code ist da – AccNeeder