原生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

放上效果图：

原文地址：https://www.cnblogs.com/huchong-bk/p/11607617.html

时间： 2024-10-11 00:13:30

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

告别组件之教你使用原生js和css写移动端轮播图

在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. 老规矩,首先看一下最终效果,这个最终可以实现定时自动播放,触摸滑动,手动修改下面横条效果等功能. 项目中使用到的HTML代码如下 <div class="banner"> <ul class="clearfix"> <li><

原生js获取css中class的方法

function getByClass( className, context) { var context = context || document; if( context.getElementsByClassName) { return context.getElementsByClassName(className); } var nodes = context.getElementsByTagName("*"); ret=[]; for( var i=0; i<nod

原生js判断css动画结束 css 动画结束的回调函数

原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 var transitions = { 'transition':'tra

用原生JS读写CSS样式的方法总结

一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式    如:var elm = document.getElementById('test'); elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性    如:elm.setAttribute('style','color:red;li

原生js通过prottype写的一个简单拖拽

<!DOCTYPE html> <head> <meta charset="utf-8"/> <title></title> <style> .box{ position:absolute;width:100px;height:100px;background-color:#FF6E3D;left:0px;top:0px;left:20px; /*修饰*/ border-radius:50%;box-shadow:

第十一节：Bundles压缩合并js和css及原理分析

一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是MVC中特有的一种优化方式. (当然现在前端也有很多基于node的工作流插件,可以合并压缩混淆js或css) 2. 原理(了解即可):核心方法ApplyTransforms,通过StreamReader不断一次一次进行读取 参考文档:https://docs.microsoft.com/en-us/a

原生js canvas 碰撞游戏的开发笔记

-----------------------------------------------福利--------------------------------------------- -----------------------------------------------分割线--------------------------------------------- 今天 我们研究下碰撞游戏 什么是碰撞游戏? 当然是东西碰到在一起啦 用前端逻辑来说 就是2个物品互相碰撞产生的事件 问

原生 JS 中对象相关 API 合集

https://juejin.im/entry/58f8a705a0bb9f0065a4cb20 原文链接:https://microzz.com/2017/04/20/jsobject/ 原生 JavaScript 中对象相关 API 合集 - 对象篇.现在 jQuery 已经没有那么有优势了,原生 JS 赶紧学起来... -- 由microzz分享 Microzz [email protected] 主页 文章 标签 GitHub 关于我 掘金专栏 SegmentFault Vue音乐播放器

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 1 var defaultPra = { 2 mainMenuId: "ArcMenu",//主菜单id 3 menuBoxId:"menuBox",//菜单包裹id 4 position: "",//弧形菜单 5 customPosition:"0