ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Виртуальная клавиатура на CSS и JavaScript

Виртуальная клавиатура на CSS и JavaScript

Здесь представлена виртуальная клавиатуру, которая выполнена JavaScript, и идет в темном оттенке цвета, что можно сделать появление по клику. Сам стиль клавиатуры выполнен в дизайне теней, где все кнопки выделены светлыми тенями, и по этому при клике по кнопки получается красивый эффект. Сама затея изначально была задумана, чтоб реальной клавиатурой не работать, а вызвать визуальную, и здесь уже работаем только мышкой. Также минусы заметил, хоть по сути клавиатура по своим функциям выполнена безупречно.

А это нет некоторых знаков, ведь мы пишем с точками или запятыми, и здесь если писать, то как то уже реальную нужно подключать. А так вы написали, то что вам нужно на одной мышке, вам остается только скопировать и вставить. Ведь по вверх идет специальная доска или табло, где как раз будет все отображается. Если вы задействуете операционную систему Windows, то здесь безусловно вы будете использовать виртуальную клавиатуру Windows, что установлена на интернет ресурсе по умолчанию.

Эту виртуальную клавиатуру можно использовать как для настольных компьютеров, так и для мобильных устройств. Другими словами, в случае с сенсорным экраном этот экранный визуальный интерфейс работает прекрасно.

Приступаем к установке:

HTML, CSS, JS полный код под страницу

Код

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  *{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  background-color: rgb(26, 26, 26);
  font-family: sans-serif;
  }
#ip{
  width: 500px;
  min-height: 30px;
  box-shadow: -3px -3px 5px rgb(63, 63, 63) , 3px 3px 5px black;
  text-align: center;
  color: white;
  letter-spacing: 1px;
  position: absolute;
  top: 165px;
  left: 50%;
  margin: -50px auto;
  transform:translateX(-50%) ;
  font-size: 18px;
  text-transform: capitalize;
}
.keybord{
  box-shadow: -3px -3px 5px rgb(63, 63, 63) , 3px 3px 5px black;
  width: 680px;
  margin:200px auto 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:20px 20px;
  border-radius: 10px;
}
.row{
  margin:5px ;
  user-select: none;
}
  button{
  width: 50px;
  height: 50px;
  font-weight: bold;
  margin: 0 4px;
  border: none;
  background-color: transparent;
  color:white;
  box-shadow: -2px -2px 4px rgb(63, 63, 63) , 2px 2px 4px black;
  border-radius: 5px;
  cursor: pointer;
}
.row4 , .backspace , .space{
  display: flex;
  align-items: center;
  justify-content: center;
}

.keybord .backspace , .space{
  color: white;
  font-weight: bold;
  cursor: pointer;
  /* user-select: none; */
}
.backspace , .space{
  border-radius: 5px;
  box-shadow: -2px -2px 4px rgb(63, 63, 63) , 2px 2px 4px black;
}
.keybord .space{
  width: 300px;
  height: 50px;

}
.keybord .backspace {
  width: 100px;
  height: 50px;
  margin-left: 15px;

}
.keybord .active{
  box-shadow:inset -2px -2px 4px rgb(63, 63, 63) ,inset 2px 2px 4px black;
  color: yellow;
}
  </style>
  <title>Document</title>
</head>
<body>
  <p id="ip"></p>
  <div class="keybord">
  <div class="row row1">
  <button>Q</button>
  <button>W</button>
  <button>E</button>
  <button>R</button>
  <button>T</button>
  <button>Y</button>
  <button>U</button>
  <button>I</button>
  <button>O</button>
  <button>P</button>
  </div>
  <div class="row row2">
  <button>A</button>
  <button>S</button>
  <button>D</button>
  <button>F</button>
  <button>G</button>
  <button>H</button>
  <button>J</button>
  <button>K</button>
  <button>L</button>
  </div>
  <div class="row row3">
  <button>Z</button>
  <button>X</button>
  <button>C</button>
  <button>V</button>
  <button>B</button>
  <button>N</button>
  <button>M</button>
  </div>
  <div class="row row4">
  <div class="space" id="space">space</div>
  <div class="backspace" id="backspace">Backspace</div>
  </div>
  </div>
  <script>
  let button = document.getElementsByTagName('button')
let p = document.getElementById('ip');
let space =document.getElementById('space')
let Backspace = document.getElementById('backspace')
// FOR KEYBOARDS
document.body.addEventListener('keydown' , function(index){

  for (let i=0 ; i <button.length ; i++) {
  if(button[i].innerHTML==index.key.toUpperCase()){
  button[i].classList.add('active')
  };

  }
  p.innerHTML+=index.key
  if(index.key=='Backspace'){
  p.innerHTML=p.innerHTML.slice(0 , -10)
  }
})
document.body.addEventListener('keyup' , function(index){
  for(let j=0 ; j<button.length ; j++){
  if(button[j].innerHTML == index.key.toUpperCase()){
  button[j].classList.remove('active')
  }
  }
})
// FOR MOUSE
for(let x of button){
  x.addEventListener('mousedown' , function(){
  x.className='active'
  p.innerHTML+=x.innerHTML
  })
}
for(let y of button){
  y.addEventListener('mouseup' , function(){
  y.className=''
  })
}

space.addEventListener('mousedown',function(){
  space.classList.add('active')
  p.innerHTML+=" "
})
space.addEventListener('mouseup',function(){
  space.classList.remove('active')
})

function back(){
  Backspace.className+=' active'
  p.innerHTML=p.innerHTML.slice(0 , -1)
}
Backspace.onmousedown=back

Backspace.onmouseup=function(){
  Backspace.classList.remove('active')
}
// FOR MOBILES AND TABLET
for(let x of button){
  x.addEventListener('touchstart' , function(){
  x.className='active'

  })
}
for(let y of button){
  y.addEventListener('touchend' , function(){
  space.classList.remove('active')
  })
}
space.addEventListener('touchstart',function(){
  space.classList.add('active')

})
space.addEventListener('touchend',function(){
  space.classList.remove('active')
})
Backspace.addEventListener('touchstart',function(){
  Backspace.className+=' active'

})
Backspace.addEventListener('touchend',function(){
  Backspace.classList.remove('active')
})
  </script>
</body>
</html>

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

Демонстрация

01 Декабря 2023 Загрузок: 3 Просмотров: 540 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0