Add js code
This commit is contained in:
parent
60181114cd
commit
7b089df9c0
3 changed files with 53 additions and 1 deletions
|
@ -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
4
main.css
|
@ -12,4 +12,8 @@ body {
|
|||
textarea {
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 50px;
|
||||
}
|
48
main.js
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…
Reference in a new issue