JS实现自定义简单网页软键盘效果代码

2024-10-02 15:04:37

本文实例讲述了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?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>?</td>
  <td>,</td>
  <td>.</td>
  <td>/</td>
 </tr>
 </table>
</div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

js鼠标按键事件和键盘按键事件用法实例汇总

本文实例讲述了js鼠标按键事件和键盘按键事件用法.分享给大家供大家参考,具体如下: keydown,keyup,keypress:属于你的键盘按键 mousedown,mouseup:属于你的鼠标按键当按钮被按下时,发生 keydown 事件, keyup是在用户将按键抬起的时候才会触发的, 完整的 key press 过程分为两个部分:1. 按键被按下:2. 按键被松开. 当用户在这个元素上按下鼠标键的时候,发生mousedown 当用户在这个元素上松开鼠标键的时候,发生mouseup 例子
JavaScript获取键盘按键的键码(参照表)

简介: JS获取键盘按键的键码event.keyCode,记录-方便查找. 1.键盘各按键对应的数字 2.键盘码使用 2.1.原生js使用 JavaScript document.onkeyup = function (event) { var e = event ? event : window.event; if (e.keyCode == 13) { //旧版火狐.Opera请使用e.which alert('您按了回车键.'); } }; 2.2.jQuery使用 JavaScript
js和jquery实现监听键盘事件示例代码

项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e
js捕捉键盘事件和按键键值的方法

如下所示: <!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> <meta http-equiv="Co
js获取及判断键盘按键的方法

本文实例讲述了js获取及判断键盘按键的方法.分享给大家供大家参考,具体如下: js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下: keyCode 8 = BackSpace BackSpace keyCode 9 = Tab Tab keyCode 12 = Clear keyCode 13 = Enter keyCode 16 = Shift_L keyCode 17 = Control_L keyCode 18 = Alt_L keyCode 19 = Pause keyC
JS实现自定义简单网页软键盘效果代码

本文实例讲述了JS实现自定义简单网页软键盘效果.分享给大家供大家参考,具体如下: 这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学习,希望对您有用处. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-web-keybord-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
js编写一个简单的产品放大效果代码

购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能: 1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理: 1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 ----------------------------------------------
JS实现仿Windows7风格的网页右键菜单效果代码

本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS仿Windows7风格的网页右键菜单,可以多级展开的右键菜单,原生JS.可参考性强,学习JavaScript的朋友不可错过.本菜单用户体验极佳,兼容性良好,无jQuery. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win7-style-web-right-menu-codes/ 具体代码如下: <!DOCTYPE htm
JS实现超简单的鼠标拖动效果

本文实例讲述了JS实现超简单的鼠标拖动效果.分享给大家供大家参考,具体如下: 这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符...如果不是考虑兼容性和变量封装,还可以更短点. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下: <title>尽可能短的写一个JS拖动</title> <body> <div id="demo&quo
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码

本文实例讲述了JS实现模拟百度搜索"2012世界末日"网页地震撕裂效果代码.分享给大家供大家参考,具体如下: 这是一款JS模拟百度搜索"2012世界末日"网页地震撕裂效果,本效果是模仿用户在百度输入"2012世界末日"后点击搜索后出来的网页效果,网页在震动,像是地震了,而后开始撕裂,然后显示出相关的文字说明,很酷的效果,希望大家可以学习借鉴. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-
JS实现黑色风格的网页TAB选项卡效果代码

本文实例讲述了JS实现黑色风格的网页TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款网页TAB选项卡JS代码,黑色超酷的风格,看了后你会喜欢的,很熟悉很经典的风格,似曾相识的感觉,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-web-tab-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition
JS实现超炫网页烟花动画效果的方法

本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
JS实现的简单折叠展开动画效果示例

本文实例讲述了JS实现的简单折叠展开动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE = html> <html> <head> <title>www.jb51.net JS折叠展开动画</title> <style> body{ margin: 0px; padding: 0px; } .red{ background-color:red; width:200px; height:200px; position:rel
jquery实现最简单的滑动菜单效果代码

本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
jQuery实现的网页竖向菜单效果代码

本文实例讲述了jQuery实现的网页竖向菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的那种管理菜单.jquery加入后方便实现了菜单展开和合拢的功能,还加入了少许动画效果,兼容性好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-v-web-menu-style-codes/ 具体代码如下: <!DOCTYPE htm

JS实现自定义简单网页软键盘效果代码

相关推荐

随机推荐