夜雨聆风
原生js制作虚拟键盘!!附源码!!
效果展示
完整源码
<!DOCTYPE html><html><head><metacharset="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><textareaname="inputArea"id="inputArea"cols="80"rows="10"placeholder="点击虚拟键盘输入"></textarea><divclass="keyboardBox"id="keyboard"><divclass="line gap_t"><divclass="keys_d t-a-l"data-kid="192"><div>~</div><div>`</div></div><divclass="keys_d t-a-l"data-kid="49"><div>!</div><div>1</div></div><divclass="keys_d t-a-l"data-kid="50"><div>@</div><div>2</div></div><divclass="keys_d t-a-l"data-kid="51"><div>#</div><div>3</div></div><divclass="keys_d t-a-l"data-kid="52"><div>$</div><div>4</div></div><divclass="keys_d t-a-l"data-kid="53"><div>%</div><div>5</div></div><divclass="keys_d t-a-l"data-kid="54"><div>^</div><div>6</div></div><divclass="keys_d t-a-l"data-kid="55"><div>&</div><div>7</div></div><divclass="keys_d t-a-l"data-kid="56"><div>*</div><div>8</div></div><divclass="keys_d t-a-l"data-kid="57"><div>(</div><div>9</div></div><divclass="keys_d t-a-l"data-kid="48"><div>)</div><div>0</div></div><divclass="keys_d t-a-l"data-kid="189"><div>_</div><div>-</div></div><divclass="keys_d t-a-l"data-kid="187"><div>+</div><div>=</div></div><divclass="keysCmd k-w-80 l-h-40 f-s-14"data-kid="8">Backspace</div></div><divclass="line"><divclass="keysCmd k-w-50"data-kid="9">Tab</div><divclass="keys"data-kid="81">Q</div><divclass="keys"data-kid="87">W</div><divclass="keys"data-kid="69">E</div><divclass="keys"data-kid="82">R</div><divclass="keys"data-kid="84">T</div><divclass="keys"data-kid="89">Y</div><divclass="keys"data-kid="85">U</div><divclass="keys"data-kid="73">I</div><divclass="keys"data-kid="79">O</div><divclass="keys"data-kid="80">P</div><divclass="keys_d t-a-l"data-kid="219"><div>{</div><div>[</div></div><divclass="keys_d t-a-l"data-kid="221"><div>}</div><div>]</div></div><divclass="keys_d k-w-75 t-a-l"data-kid="220"><div>|</div><div>\</div></div></div><divclass="line"><divclass="keysCmd k-w-70 f-s-14"data-kid="20">CapsLock</div><divclass="keys"data-kid="65">A</div><divclass="keys"data-kid="83">S</div><divclass="keys"data-kid="68">D</div><divclass="keys"data-kid="70">F</div><divclass="keys"data-kid="71">G</div><divclass="keys"data-kid="72">H</div><divclass="keys"data-kid="74">J</div><divclass="keys"data-kid="75">K</div><divclass="keys"data-kid="76">L</div><divclass="keys_d t-a-l"data-kid="186"><div>:</div><div>;</div></div><divclass="keys_d t-a-l"data-kid="222"><div>"</div><div>'</div></div><divclass="keysCmd key_enter"data-kid="13">Enter</div></div><divclass="line"><divclass="keysCmd k-w-100"data-kid="16">Shift</div><divclass="keys"data-kid="90">Z</div><divclass="keys"data-kid="88">X</div><divclass="keys"data-kid="67">C</div><divclass="keys"data-kid="86">V</div><divclass="keys"data-kid="66">B</div><divclass="keys"data-kid="78">N</div><divclass="keys"data-kid="77">M</div><divclass="keys_d t-a-l"data-kid="188"><div><</div><div>,</div></div><divclass="keys_d t-a-l"data-kid="190"><div>></div><div>.</div></div><divclass="keys_d t-a-l"data-kid="191"><div>?</div><div>/</div></div><divclass="keysCmd k-w-120"data-kid="16">Shift</div></div><divclass="line"><divclass="keys k-w-704"data-kid="32"> </div></div></div><scripttype="text/javascript"src="keyboard.js"></script><script>window.onload = function(){new keyboard().addKeyboard('inputArea');}</script></body></html>
//* keyboard.jsvar 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;}// 添加classnamefunction _addClass(obj, cls){var obj_class = obj.className,blank = obj_class != '' ? ' ' : '';var added = obj_class + blank + cls;obj.className = added;}// 删除classnamefunction _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;}// 为按钮添加activefunction _addActive(cls, keycode){var keys = document.getElementsByClassName(cls);for(var o of keys){if(o.getAttribute('data-kid') == keycode){_addClass(o, 'active');}}}// 为按钮取消activefunction _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 = idvar inputObj = document.getElementById(id);inputObj.onclick = _showKeyboard();_bindEvent();}return keyboard;})()
