使用 javascript做一个虚拟键盘_虚拟键盘js-优快云博客

本文链接：https://blog.youkuaiyun.com/Ceremony_feeling/article/details/102655094

本文将介绍如何使用JavaScript创建一个虚拟键盘。通过这段教程，读者将了解到如何布局、响应式设计以及与输入框交互的关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##使用 javascript做一个虚拟键盘

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <title>虚拟键盘</title>
    <style>
        #inputArea{position: absolute; top: 30%; left: 20%;}
        .keyboardBox{
   position: fixed; top: 50%; left: 20%; width: 708px; height: 256px; margin: 0; padding: 10px; background-color: #ccc; font-size: 16px;}
        .line{
   position: relative; height: 50px; line-height: 50px;}
        .keys, .keysCmd, .keys_d{
   box-sizing: border-box; float: left; width: 45px; height: 45px; line-height: 45px; margin: 0 0 3px 3px; border-radius: 4px; border: 1px solid #333; text-align: center; cursor: pointer; background-color: #fff;}
        .keys:hover, .keysCmd:hover, .keys_d:hover{
   box-shadow: 0px 0px 3px #333 inset;}
        .keys:active, .keysCmd:active, .keys_d:active{
   background-color: #dedede;}
        .active{
   background-color: #dedede; box-shadow: 0px 0px 3px #333 inset;}
        .keys_d{
   height: 45px; line-height: 20px;}
        .key_enter{
   width: 102px;}
        .k-w-50{
   width: 50px;}
        .k-w-70{
   width: 70px;}
        .k-w-75{
   width: 75px;}
        .k-w-80{
   width: 80px;}
        .k-w-100{
   width: 100px;}
        .k-w-120{
   width: 120px;}
        .k-w-704{
   width: 704px;}
        .gap{
   margin-left: 30px;}
        .gap_t{
   margin-top: 10px;}
        .line .l-h-40{
   line-height: 40px;}
        .f-s-14{
   font-size: 14px;}
        .t-a-l{
   padding-left