原生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>&</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"> </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(' ');
_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]是本人的个 ...
随机推荐
- linux搭建ftp配置文件
# Example config file /etc/vsftpd/vsftpd.conf## The default compiled in settings are fairly paranoid ...
- T89353 【BIO】RGB三角形
T89353 [BIO]RGB三角形 题解 对于这个题目有一个规律: 如果一个数列的长度为 3k+1(0<=k) 那么,这个数列最终缩放成的一个字母只和这个数列的首项,尾项有关 所以我们可以先 ...
- jQuery获取元素值以及设置元素值总结
html(): 1:用户获取元素内的HTML内容,如果元素包含子标签,会以整体的形式返回 2:只获取第一个元素的内容 3:只获取普通元素的内容,表单元素内容无法获取 html(val): 1:用来设置 ...
- 五十四：WTForms表单验证之自定义表单验证器
如果想要对表单中的某个字段进行自定义验证,则需要对这个字段进行单独的验证1.定义一个方法,命名规则为:validate_字段名(self, filed)2.在方法中,使用filed.data获取字段的 ...
- LinuxE2系统刷机后OSCAM安装与读卡器设置
我也属于E2小白,最近才开始玩这个系统.从dinobot 4k+,到H7s,在到H5,各种E2机器都买了.刚开始入手的时候,怎么这么麻烦?慢慢的发现,烧新,玩E2也是一种乐趣,只不过最近困扰我的刷机后 ...
- [转] ansible批量执行命令展示
[From] https://blog.csdn.net/zhydream77/article/details/81223805 ansible命令基础 • ansible <host-patt ...
- PJzhang:查看你的微信、QQ、新浪微博都授权给过谁
猫宁!!! 个人信息的保护,需要时刻关注,不能有丝毫懈怠. 保护个人信息,有两个方向,一个是减少个人信息外泄,另一个是上传大量鱼龙杂的个人信息,难以分辨,混淆视听. 这里不谈第二个, ...
- C#实现多线程的方法：线程(Thread类)和线程池(ThreadPool)
简介 使用线程的主要原因:应用程序中一些操作需要消耗一定的时间,比如对文件.数据库.网络的访问等等,而我们不希望用户一直等待到操作结束,而是在此同时可以进行一些其他的操作. 这就可以使用线程来实现. ...
- 树莓派4B 串口通信
提前下载安装Glade图形编辑器 参考 树莓派4B安装netcore 环境部署.发布.执行操作 准备串口设备本文使用串口控制继电器设备 如图 1.发现串口 void GetSerialPort() { ...
- HttpClient常用方法总结
1.HttpPost发送表单请求 String url = ""; HttpPost httpPost = new HttpPost(url); List<NameValue ...