Browse Source

Add js code

master
Nyymix 2 months ago
parent
commit
7b089df9c0
  1. 2
      index.html
  2. 4
      main.css
  3. 48
      main.js

2
index.html

@ -10,7 +10,7 @@
<body>
<h1>Virtual Keyboard</h1>
<div class="wrapper">
<textarea id="transtxt" cols="30" rows="15" oninput="translit()"></textarea>
<textarea id="keytext" cols="30" rows="15"></textarea>
</div>
<div class="buttons">
<button value="й">й</button>

4
main.css

@ -12,4 +12,8 @@ body {
textarea {
font-size: 20px;
width: 100%;
}
button {
width: 50px;
}

48
main.js

@ -0,0 +1,48 @@
document.querySelectorAll('.buttons>button').forEach((button) => {
button.addEventListener('click', e => {
const value = e.target.value;
keypress(value);
})
});
function keypress(str) {
var textarea = document.getElementById("keytext");
if (textarea.selectionStart || textarea.selectionStart == '0') {
var txt = textarea.value;
var startPos = textarea.selectionStart;
var endPos = textarea.selectionEnd;
if (str === 'del' || str === 'DEL') {
if (startPos == endPos) {
textarea.value = txt.substring(0, startPos - 1) + txt.substring(endPos, txt.length);
textarea.focus();
textarea.selectionStart = startPos - 1;
textarea.selectionEnd = endPos - 1;
} else {
textarea.value = txt.substring(0, startPos) + txt.substring(endPos, txt.length);
textarea.focus();
textarea.selectionStart = startPos;
textarea.selectionEnd = startPos;
}
} else if (str === 'cap') {
document.querySelectorAll('.buttons>button').forEach((t) => {
t.textContent = t.textContent.toUpperCase();
t.value = t.value.toUpperCase();
});
} else if (str === 'CAP') {
document.querySelectorAll('.buttons>button').forEach((t) => {
t.textContent = t.textContent.toLowerCase();
t.value = t.value.toLowerCase();
});
} else {
textarea.value = txt.substring(0, startPos) + str + txt.substring(endPos, txt.length);
textarea.focus();
textarea.selectionStart = startPos + str.length;
textarea.selectionEnd = startPos + str.length;
}
} else {
textarea.value += str;
textarea.focus();
}
}
Loading…
Cancel
Save