Создание собственной виртуальной клавиатуры

ProgramBox

Создание собственной виртуальной клавиатуры

Post author:admin
Запись опубликована:4 февраля, 2023
Post category:Вопросы по программированию

#javascript #virtual-keyboard

#javascript #виртуальная клавиатура

Вопрос:

Я хочу создать свою собственную виртуальную клавиатуру, используя JavaScript.

Пожалуйста, подскажите мне синтаксис, как добавлять символы в текстовое поле. Добавить первый символ легко, но добавить второй я не могу.

Кто-нибудь, пожалуйста, дайте подсказку / логику для добавления текста в текстовое keypress поле.

Ответ №1:

То, что сказал Тенефф, — это начало.. следующий код будет для вас подсказкой..

 <form name="virtual">
<input type="text" name="text"/>
<input type="button" onclick="a()" value="a" style="border:none;"/>
</form>
<script type="text/javascript">
 function a(){
    document.forms["virtual"]["text"].value  = "a";
}
</script>

Ответ №2:

1. Получить все поля, которые можно будет записывать внутри с помощью виртуальной клавиатуры

2. Прикрепите onfocus событие к каждому полю, чтобы узнать, какое поле было выбрано

3. После нажатия клавиши на клавиатуре добавьте букву к значению и верните фокус в поле

ЭТО простой пример, который я написал

Ответ №3:

Если проблема заключается в том, что символ перезаписывается, убедитесь, что вы добавляете следующий символ в текстовое поле, а не просто перезаписываете его. Т.Е. если ваше текстовое поле содержит «a»

 textbox.value  = 'b'; // would result in "ab"
textbox.value = 'b'; // would result in "b"

Ответ №4:

Если вы хотите сделать это лучше, я не сделал это полностью, просто украл код 😉

 <!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>Text</title>


<style media="screen">
body {
    background-color: #f0f0f0;
}
#keyboard {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #009;
    border-radius: 10px;
    background-color: #777777;
    text-align: center;
    box-shadow: 4px 4px 4px #999;
}
#keyboard div {
    margin: 5px 0;
}
#space {
    width: 184px;
}
#keyboard label {
    margin-top: 20px;
    font-family: serif;
    text-decoration: underline;
}
#keyboard input {
    box-shadow: 2px 2px 2px #666;
}
#keyboard input[type="text"] {
    margin-top: 20px;
    border: 1px solid #666;
    border-radius: 4px;
    box-shadow: none;
}
#keyboard #back {
    font-weight: bold;
 }
 

#keyboard-placement {
    position: absolute;
    bottom: 10px;
    margin-left: 39%;
}
</style>
<div id="keyboard-placement">
<script>
(function() {
   'use strict';
   var i,c;
function init(){ 
/* get all the input elements within the div whose id is "keyboard */
   i=document.getElementById('keyboard').getElementsByTagName('input'); 
/* loop through all the elements */   

for(c=0;c<i.length;c  ) {
/* find all the the input type="button" elements */
if(i[c].type==='button') { 
 /* add an onclick handler to each of them  and set the function to call */
   i[c].addEventListener('onclick',makeClickHandler(c));
   }
  }

/* this is the type="reset" input */
document.getElementById('clear').onclick=function() {
/* remove all the characters from the input type="text" element */
   document.getElementById('text').value='';
  }
 }

function makeClickHandler(c) {
   i[c].onclick=function() {
/* find the non-text button  which has an id */
if(i[c].id==='back') {
/* remove last character from the input the type="text" element using regular expression */
   document.getElementById('text').value=
   document.getElementById('text').value.replace(/.$/,'');
 }
/* find the text buttons */
else {
/* add characters to the input type="text" element */
   document.getElementById('text').value =this.value.toLowerCase();
   }
  };
 }

   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
})();
</script>

</head>
<body>

<div id="keyboard" >

<div>
 <input type="button" value="Q">
 <input type="button" value="W">
 <input type="button" value="E">
 <input type="button" value="R">
 <input type="button" value="T">
 <input type="button" value="Y">
 <input type="button" value="U">
 <input type="button" value="I">
 <input type="button" value="O">
 <input type="button" value="P">
</div><div>
 <input type="button" value="A">
 <input type="button" value="S">
 <input type="button" value="D">
 <input type="button" value="F">
 <input type="button" value="G">
 <input type="button" value="H">
 <input type="button" value="J">
 <input type="button" value="K">
 <input type="button" value="L">
</div><div>
 <input type="button" value="Z">
 <input type="button" value="X">
 <input type="button" value="C">
 <input type="button" value="V">
 <input type="button" value="B">
 <input type="button" value="N">
 <input type="button" value="M">
</div><div>
 <input id="back" type="button" value="amp;#8592;">
 <input id="space" type="button" value=" ">
 <input id="clear" type="reset" value="clear">
</div><div>
<label>Track Search</label> - <input id="text" type="text" readonly="readonly">
</div>

</div>
</div>

</body>
</html>