原生js和css写虚拟键盘

代码来源忘记是哪个大神的了，抱歉抱歉

放上源码：

<!-- 虚拟键盘 -->

<!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: 15px; text-align: left;}

    </style>

</head>

<body>

<textarea name="inputArea" id="inputArea" cols="80" rows="10" placeholder="点击虚拟键盘输入"></textarea>

<div class="keyboardBox" id="keyboard">

    <div class="line gap_t">

        <div class="keys_d t-a-l" data-kid="192"><div>~</div><div>`</div></div>

        <div class="keys_d t-a-l" data-kid="49"><div>!</div><div>1</div></div>

        <div class="keys_d t-a-l" data-kid="50"><div>@</div><div>2</div></div>

        <div class="keys_d t-a-l" data-kid="51"><div>#</div><div>3</div></div>

        <div class="keys_d t-a-l" data-kid="52"><div>$</div><div>4</div></div>

        <div class="keys_d t-a-l" data-kid="53"><div>%</div><div>5</div></div>

        <div class="keys_d t-a-l" data-kid="54"><div>^</div><div>6</div></div>

        <div class="keys_d t-a-l" data-kid="55"><div>&amp;</div><div>7</div></div>

        <div class="keys_d t-a-l" data-kid="56"><div>*</div><div>8</div></div>

        <div class="keys_d t-a-l" data-kid="57"><div>(</div><div>9</div></div>

        <div class="keys_d t-a-l" data-kid="48"><div>)</div><div>0</div></div>

        <div class="keys_d t-a-l" data-kid="189"><div>_</div><div>-</div></div>

        <div class="keys_d t-a-l" data-kid="187"><div>+</div><div>=</div></div>

        <div class="keysCmd k-w-80 l-h-40 f-s-14" data-kid="8">Backspace</div>

    </div>

    <div class="line">

        <div class="keysCmd k-w-50" data-kid="9">Tab</div>

        <div class="keys" data-kid="81">Q</div>

        <div class="keys" data-kid="87">W</div>

        <div class="keys" data-kid="69">E</div>

        <div class="keys" data-kid="82">R</div>

        <div class="keys" data-kid="84">T</div>

        <div class="keys" data-kid="89">Y</div>

        <div class="keys" data-kid="85">U</div>

        <div class="keys" data-kid="73">I</div>

        <div class="keys" data-kid="79">O</div>

        <div class="keys" data-kid="80">P</div>

        <div class="keys_d t-a-l" data-kid="219"><div>{</div><div>[</div></div>

        <div class="keys_d t-a-l" data-kid="221"><div>}</div><div>]</div></div>

        <div class="keys_d k-w-75 t-a-l" data-kid="220"><div>|</div><div>\</div></div>

    </div>

    <div class="line">

        <div class="keysCmd k-w-70 f-s-14" data-kid="20">CapsLock</div>

        <div class="keys" data-kid="65">A</div>

        <div class="keys" data-kid="83">S</div>

        <div class="keys" data-kid="68">D</div>

        <div class="keys" data-kid="70">F</div>

        <div class="keys" data-kid="71">G</div>

        <div class="keys" data-kid="72">H</div>

        <div class="keys" data-kid="74">J</div>

        <div class="keys" data-kid="75">K</div>

        <div class="keys" data-kid="76">L</div>

        <div class="keys_d t-a-l" data-kid="186"><div>:</div><div>;</div></div>

        <div class="keys_d t-a-l" data-kid="222"><div>"</div><div>'</div></div>

        <div class="keysCmd key_enter" data-kid="13">Enter</div>

    </div>

    <div class="line">

        <div class="keysCmd k-w-100" data-kid="16">Shift</div>

        <div class="keys" data-kid="90">Z</div>

        <div class="keys" data-kid="88">X</div>

        <div class="keys" data-kid="67">C</div>

        <div class="keys" data-kid="86">V</div>

        <div class="keys" data-kid="66">B</div>

        <div class="keys" data-kid="78">N</div>

        <div class="keys" data-kid="77">M</div>

        <div class="keys_d t-a-l" data-kid="188"><div><</div><div>,</div></div>

        <div class="keys_d t-a-l" data-kid="190"><div>></div><div>.</div></div>

        <div class="keys_d t-a-l" data-kid="191"><div>?</div><div>/</div></div>

        <div class="keysCmd k-w-120" data-kid="16">Shift</div>

    </div>

    <div class="line">

        <div class="keys k-w-704" data-kid="32">&nbsp;</div>

    </div>

</div>

<!-- <script type="text/javascript" src="keyboard.js"></script> -->

<script>

window.onload = function(){

    new keyboard().addKeyboard('inputArea');

}

</script>

</body>

</html>

<script type="text/javascript">

    //* keyboard.js

    var keyboard = (function(){

        var keyboardObj = document.getElementById('keyboard'), _inputID, _shiftStatus = false, _capsLock = false;

        // 显示虚拟键盘

        var _showKeyboard = function(){

            keyboardObj.style.display = 'block';

        }

        // 隐藏虚拟键盘

        var _hideKeyboard = function(){

            keyboardObj.style.display = 'none';

        }

        // 获取输入框的内容

        var _getInputContent = function(){

            var inputContent = document.getElementById(_inputID).innerText || document.getElementById(_inputID).textContent;

            return inputContent;

        }

        // 输入新内容

        var _inputNewContent = function(str){

            document.getElementById(_inputID).innerHTML = str;

        }

        // 添加classname

        function _addClass(obj, cls){

            var obj_class = obj.className,

            blank = obj_class != '' ? ' ' : '';

            var added = obj_class + blank + cls;

            obj.className = added;

        }

        // 删除classname

        function _removeClass(obj, cls){

            var obj_class = ' ' + obj.className + ' ';

            obj_class = obj_class.replace(/(\s+)/gi, ' ');

            var removed = obj_class.replace(' ' + cls + ' ', ' ');

            removed = removed.replace(/(^\s+)|(\s+$)/g, '');

            obj.className = removed;

        }

        // 为按钮添加active

        function _addActive(cls, keycode){

            var keys = document.getElementsByClassName(cls);

            for(var o of keys){

                if(o.getAttribute('data-kid') == keycode){

                    _addClass(o, 'active');

                }

            }

        }

        // 为按钮取消active

        function _removeActive(cls, keycode){

            var keys = document.getElementsByClassName(cls);

            for(var o of keys){

                if(o.getAttribute('data-kid') == keycode){

                    _removeClass(o, 'active');

                }

            }

        }

        // 添加shift状态

        var _addShift = function(){

            _addActive('keysCmd', 16);

            return _shiftStatus = true;

        }

        // 取消shift状态

        var _removeShift = function(){

            _removeActive('keysCmd', 16);

            return _shiftStatus = false;

        }

        // 添加CapsLock状态

        var _addCapsLock = function(){

            _addActive('keysCmd', 20);

            return _capsLock = true;

        }

        // 取消CapsLock状态

        var _removeCapsLock = function(){

            _removeActive('keysCmd', 20);

            return _capsLock = false;

        }

        // 给按钮绑定触发键盘事件的事件

        var _bindEvent = function(){

            // 字母按键

            var keys = keyboardObj.getElementsByClassName('keys');

            for(var o of keys){

                o.onclick = function(){

                    var strArr = _getInputContent().split('');

                    if(_shiftStatus){

                        _capsLock = !_capsLock;

                        _capsLock ? strArr.push(this.innerHTML.toUpperCase()) : strArr.push(this.innerHTML.toLowerCase());

                        _capsLock = !_capsLock;

                        _removeShift();

                    }

                    else{_capsLock ? strArr.push(this.innerHTML.toUpperCase()) : strArr.push(this.innerHTML.toLowerCase());}

                    _inputNewContent(strArr.join(''));

                }

            }

            // 数字及特殊符号按键

            var keys_d = document.getElementsByClassName('keys_d');

            for(var o of keys_d){

                o.onclick = function(){

                    var strArr = _getInputContent().split('');

                    var key1 = this.getElementsByTagName('div')[0].innerHTML;

                    var key2 = this.getElementsByTagName('div')[1].innerHTML;

                    if(_shiftStatus){

                        strArr.push(key1);

                        _removeShift();

                    }else{strArr.push(key2);}

                    _inputNewContent(strArr.join(''));

                }

            }

            // shift、capslock、enter、tab、backspace 按钮

            var keysCmd = document.getElementsByClassName('keysCmd');

            for(var o of keysCmd){

                o.onclick = function(){

                    var strArr = _getInputContent().split('');

                    var keyCode = this.getAttribute('data-kid');

                    if(keyCode == 8){

                        strArr.pop();

                        _inputNewContent(strArr.join(''));

                    }else if(keyCode == 9){

                        strArr.push('&nbsp;&nbsp;');

                        _inputNewContent(strArr.join(''));

                    }else if(keyCode == 13){

                        strArr.push('\n');

                        _inputNewContent(strArr.join(''));

                    }else if(keyCode == 16){

                        if(!_shiftStatus){_addShift();}else{_removeShift();}

                    }else if(keyCode == 20){

                        if(!_capsLock){_addCapsLock();}else{_removeCapsLock();}

                    }

                }

            }

        }

        var keyboard = function(){}

        // 输入框绑定键盘

        keyboard.prototype.addKeyboard = function(id){

            _inputID = id

            var inputObj = document.getElementById(id);

            inputObj.onclick = _showKeyboard();

            _bindEvent();

        }

        return keyboard;

    })()

</script>

html

放上效果图：

原生js和css写虚拟键盘的更多相关文章

告别组件之教你使用原生js和css写移动端轮播图
在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
原生JS、CSS实现的转盘效果（目前仅支持webkit）
这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
用原生JS读写CSS样式的方法总结
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDe ...
jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...
原生JS实战：写了个斗牛游戏，分享给大家一起玩！
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5869953.html 该程序是本人的个人作品,写的不好,未经本人允许,请 ...
原生JS实战：写了个一边玩游戏，一边记JS的API的游戏
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...

随机推荐

android 知识体系
集成学习之Adaboost算法原理
在boosting系列算法中,Adaboost是最著名的算法之一.Adaboost既可以用作分类,也可以用作回归. 1. boosting算法基本原理集成学习原理中,boosting系列算法的思想:
ESP32开发之Windows开发环境
电脑出了问题linux系统下的环境不知道怎么就挂了,在一次搭建,总是出错,没办法,只能在win10下一试. 1 下载交叉编译工具,最新版找到并下载最新的工具链: https://dl.espress ...
Redis 高级应用
Redis SAVE 命令用于创建当前数据库的备份该命令将在 redis 安装目录中创建dump.rdb文件. 如果需要恢复数据,只需将备份文件 (dump.rdb) 移动到 redis 安装目录并 ...
SPSS学习笔记之——Kaplan-Meier生存分析
SPSS学习笔记之--Kaplan-Meier生存分析一.概述关于生存分析的相关概念,Kaplan-Meier用于估计生存函数,允许有一个分组变量进行生存率的组间比较,还容许一个分层变量.若不考虑 ...
配置 Nginx 错误页面优雅显示
[root@localhost ~]# cat /usr/local/nginx/conf/nginx.conf ...... http { location / { root html/www; i ...
【转】Java IOUtils方式上传下载文件 on HDFS
[From]https://www.cnblogs.com/areyouready/p/9795442.html package com.css.hdfs04; import java.io.File ...
Smarty快速入门
1.Smarty是用纯php语言写的类 2.功能是实现前后端分离 3.Smarty简洁高效 4.快速入门案例 1.下载 smarty源码 https://www.smarty.net/ 2.搭建PHP ...
C学习笔记-指针
指针的概念指针也是一个变量,指针变量的值是另一个变量的地址换句话说就是,指针存放的是一个内存地址,该地址指向另一块内存空间指针变量的定义指向一个变量的变量 int *p = NULL; p = ...
java application.properties 密码加密
main方法 public static void main(String[] args) { BasicTextEncryptor textEncryptor = new BasicTextEncr ...

原生js和css写虚拟键盘

原生js和css写虚拟键盘的更多相关文章

随机推荐

热门专题