Home>

This is a custom simple web soft keyboard.Without using any controls,Just to practice javascript writing level,There is not much consideration in terms of security,If you have concerns, you don't need to.The purpose is to learn,I hope you find it useful.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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>Write a simple web soft keyboard</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 == "backspace") {
  input.value=input.value.slice (0, -1);
 }
 if (el.innerhtml == "Toggle upper/lower case") {
  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?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 readonly="readonly" /><input type="button" value="on/off keyboard" onclick="ctrkeyboard ()" />
<br>
<br>
<div>
 <table cellspacing="1" width="480" onclick="test ()">
 <tr>
  <th colspan="16">keyboard analog input cipher</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">backspace</td>
 </tr>
 <tr>
  <td>`</td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>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">Switch between uppercase/lowercase</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>?</td>
  <td> ;,</td>
  <td> ;.</td>
  <td>/</td>
 </tr>
 </table>
</div>
</body>
</html>
  • Previous jQuery back to top and bottom code with animation
  • Next Daily collection and arrangement of SqlServer database optimization experience and precautions