1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
/*******************************************************
* keyboard.js (VERSIONE SENZA encryptInBackground)
*
* - Mostra/Nasconde la tastiera virtuale
* - Inserisce caratteri in chiaro dentro #textInput
* - Nessuna logica di cifratura/offuscamento
******************************************************/
document.addEventListener("DOMContentLoaded", () => {
const showKeyboardButton = document.getElementById("showKeyboardButton");
const keyboardTooltip = document.getElementById("keyboardTooltip");
const keyboardContainer = document.getElementById("keyboardContainer");
const closeKeyboardButton = document.getElementById("closeKeyboardButton");
const virtualKeyboard = document.getElementById("virtualKeyboard");
const keyboardHeader = document.getElementById("keyboardHeader");
// Campo di testo dove inserire i caratteri
const textInput = document.getElementById("textInput");
// Layout fisso per la tastiera (nessun random, nessuna cifratura)
const layout = [
"q","w","e","r","t","y","u","i","o","p",
"a","s","d","f","g","h","j","k","l","_",
"z","x","c","v","b","n","m","0","1","2",
"3","4","5","6","7","8","9",".","-","@"
];
/*******************************************************
* Tooltip su pulsante “Virtual Keyboard”
*******************************************************/
showKeyboardButton.addEventListener("mouseenter", () => {
keyboardTooltip.style.display = "block";
const btnRect = showKeyboardButton.getBoundingClientRect();
// Posiziona tooltip SOPRA il pulsante
keyboardTooltip.style.left = btnRect.left + "px";
keyboardTooltip.style.top = (btnRect.top - keyboardTooltip.offsetHeight - 8) + "px";
});
showKeyboardButton.addEventListener("mouseleave", () => {
keyboardTooltip.style.display = "none";
});
/*******************************************************
* Mostra/Nasconde #keyboardContainer
*******************************************************/
showKeyboardButton.addEventListener("click", () => {
keyboardContainer.style.display = "block"; // Mostra la tastiera
generateKeyboard(); // Crea i tasti
});
closeKeyboardButton.addEventListener("click", () => {
keyboardContainer.style.display = "none"; // Nasconde la tastiera
});
/*******************************************************
* Genera i tasti della tastiera virtuale
*******************************************************/
function generateKeyboard() {
virtualKeyboard.innerHTML = ""; // Pulisce il contenuto precedente
// Crea i tasti per ogni carattere del layout
layout.forEach(char => {
const keyElem = document.createElement("div");
keyElem.classList.add("key");
keyElem.textContent = char;
// Al click sul tasto, aggiunge il char al textInput in chiaro
keyElem.addEventListener("click", () => {
if (textInput) {
textInput.value += char;
}
});
virtualKeyboard.appendChild(keyElem);
});
// Aggiunge tasti speciali (Space, Backspace, Clear)
addSpecialKeys();
}
function addSpecialKeys() {
// [space]
const spaceKey = document.createElement("div");
spaceKey.classList.add("key");
spaceKey.textContent = "[space]";
spaceKey.addEventListener("click", () => {
if (textInput) {
textInput.value += " ";
}
});
virtualKeyboard.appendChild(spaceKey);
// Backspace
const backspaceKey = document.createElement("div");
backspaceKey.classList.add("key");
backspaceKey.textContent = "Backspace";
backspaceKey.addEventListener("click", () => {
if (textInput && textInput.value.length > 0) {
textInput.value = textInput.value.slice(0, -1);
}
});
virtualKeyboard.appendChild(backspaceKey);
// Clear
const clearKey = document.createElement("div");
clearKey.classList.add("key");
clearKey.textContent = "Clear";
clearKey.addEventListener("click", () => {
if (textInput) {
textInput.value = "";
}
});
virtualKeyboard.appendChild(clearKey);
}
/*******************************************************
* Drag & Drop della tastiera
*******************************************************/
let isDragging = false;
let offsetX = 0, offsetY = 0;
keyboardHeader.addEventListener("mousedown", (e) => {
isDragging = true;
offsetX = e.clientX - keyboardContainer.offsetLeft;
offsetY = e.clientY - keyboardContainer.offsetTop;
});
document.addEventListener("mousemove", (e) => {
if (isDragging) {
keyboardContainer.style.left = (e.clientX - offsetX) + "px";
keyboardContainer.style.top = (e.clientY - offsetY) + "px";
}
});
document.addEventListener("mouseup", () => {
isDragging = false;
});
});
|
