JS implements custom simple web page soft keyboard effect code

JS implements custom simple web page soft keyboard effect code_javascript skills

WBOY

Release： 2016-05-16 15:33:46

Original

2046 people have browsed it

The example in this article describes the JS implementation of a customized simple web page soft keyboard effect. Share it with everyone for your reference, the details are as follows:

This is a customized and simple web page soft keyboard. It does not use any controls. It is just for practicing JavaScript writing skills. There is not much consideration in terms of security. If you have concerns, you can not use it. The purpose is to learn. I hope it will be helpful to you. You have a use.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-simple-web-keybord-style-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自写一个简单点的网页软键盘</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
* {
 padding:0;
 margin:0;
}
body {
 background:#fff;
}
th, td {
 border:1px solid #ccc;
 padding:2px 0;
 text-align:center;
}
td {
 cursor:pointer
}
div {
 border:1px solid #999;
 float:left;
 padding:1px;
 display:none;
}
.num {
 color:blue;
}
</style>
<script>
var htmlCode = {
 "&" : "&",
 '"' : "\"",
 "<" : "<",
 ">" : ">",
}
function test(){
 var input = document.getElementById("input");
 var e = window.event || test.caller.arguments[0];
 var el = e.target || e.srcElement;
 if(el.tagName.toLowerCase() == "td" && el.rowSpan <= 1 && el.colSpan <= 1 ){
  var str = el.innerHTML;
  str = htmlCode[str] || str;
  input.value += str;
 }
 if(el.innerHTML == "退格"){
  input.value = input.value.slice(0,-1); 
 }
 if(el.innerHTML == "切换大/小写"){
  var els = document.getElementsByTagName("td");
  for(var i = 0, l = els.length; i < l; i++){
   var str = els[i].innerHTML;
   if(/^[a-z]$/.test(str))
    els[i].innerHTML = str.toUpperCase();
   if(/^[A-Z]$/.test(str))
    els[i].innerHTML = str.toLowerCase(); 
  }
 }
 if(el.innerHTML == "ENTER"){
  ctrKeyboard();
 }
}
function ctrKeyboard(){
 var el = document.getElementById("keyboard");
 if(el.offsetWidth > 0)
  el.style.display = "none";
 else {
  el.style.display = "block";
  sortNum(); 
  capsInit();
 }
}
function capsInit(){
 var els = document.getElementsByTagName("td");
 for(var i = 0,j = 0, l = els.length; i < l; i++){
  var str = els[i].innerHTML;
  if(/^[A-Z]$/.test(str))
   els[i].innerHTML = str.toLowerCase(); 
 }
}
function sortNum (){
 var arr = [0,1,2,3,4,5,6,7,8,9].sort(function(){
  return Math.random() > 0.5&#63;1:-1;
 });
 var els = document.getElementsByTagName("td");
 for(var i = 0,j = 0, l = els.length; i < l; i++){
  var str = els[i].innerHTML;
  if(/^\d$/.test(str))
   els[i].innerHTML = arr[j++];
 } 
}
</script>
</head>
<body>
<input id="input" readonly="readonly"/><input type="button" value="打开/关闭 键盘" onclick="ctrKeyboard()"/>
<br>
<br>
<div id="keyboard">
 <table cellspacing="1" width="480" onclick="test()">
 <tr>
  <th colspan="16">键盘模拟输入密码器</th>
 </tr>
 <tr>
  <td>~</td>
  <td>!</td>
  <td>@</td>
  <td>#</td>
  <td>$</td>
  <td>%</td>
  <td>^</td>
  <td>&</td>
  <td>*</td>
  <td>(</td>
  <td>)</td>
  <td>_</td>
  <td>+</td>
  <td>|</td>
  <td rowspan="2" width="120">退格</td>
 </tr>
 <tr>
  <td>`</td>
  <td class="num">1</td>
  <td class="num">2</td>
  <td class="num">3</td>
  <td class="num">4</td>
  <td class="num">5</td>
  <td class="num">6</td>
  <td class="num">7</td>
  <td class="num">8</td>
  <td class="num">9</td>
  <td class="num">0</td>
  <td>-</td>
  <td>=</td>
  <td>\</td>
 </tr>
 <tr>
  <td>q</td>
  <td>w</td>
  <td>e</td>
  <td>r</td>
  <td>t</td>
  <td>y</td>
  <td>u</td>
  <td>i</td>
  <td>o</td>
  <td>p</td>
  <td>{</td>
  <td>}</td>
  <td>[</td>
  <td>]</td>
  <td colspan="2">切换大/小写</td>
 </tr>
 <tr>
  <td>a</td>
  <td>s</td>
  <td>d</td>
  <td>f</td>
  <td>g</td>
  <td>h</td>
  <td>j</td>
  <td>k</td>
  <td>l</td>
  <td>:</td>
  <td>"</td>
  <td>;</td>
  <td>'</td>
  <td colspan="3" rowspan="3">ENTER</td>
 </tr>
 <tr>
  <td>z</td>
  <td>x</td>
  <td>c</td>
  <td>v</td>
  <td>b</td>
  <td>n</td>
  <td>m</td>
  <td><</td>
  <td>></td>
  <td>&#63;</td>
  <td>,</td>
  <td>.</td>
  <td>/</td>
 </tr>
 </table>
</div>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone in JavaScript programming.