집 > 기사 > 웹 프론트엔드 > JS는 사용자 정의 간단한 웹 페이지 소프트 키보드 효과 code_javascript 기술을 구현합니다.

JS는 사용자 정의 간단한 웹 페이지 소프트 키보드 효과 code_javascript 기술을 구현합니다.

WBOY원래의: 2016-05-16 15:33:462013검색

이 기사의 예에서는 사용자 정의된 간단한 웹 페이지 소프트 키보드 효과의 JS 구현을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이것은 사용자 정의되고 간단한 웹 페이지 소프트 키보드입니다. 컨트롤을 사용하지 않습니다. 단지 JavaScript 쓰기 기술을 위한 것입니다. 보안 측면에서 그다지 고려되지 않은 경우에는 사용할 수 없습니다. . 학습하는데 도움이 되기를 바랍니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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

구체적인 코드는 다음과 같습니다.

<!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>

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：js 배열 deduplication_javascript 기술을 위한 5가지 알고리즘 구현다음 기사：js 배열 deduplication_javascript 기술을 위한 5가지 알고리즘 구현

JS는 사용자 정의 간단한 웹 페이지 소프트 키보드 효과 code_javascript 기술을 구현합니다.

관련 기사