JS 软键盘
2014-03-12 15:10
260 查看
keyboard.js内容
[javascript]
view plaincopyprint?
$(document).ready(function() {
var $writeBox = $('#write'),
shift = false,
capslock = false;
$('#keyboard li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}).click(function() {
var $this = $(this),
charater = $this.html();
// 一键两意
if($this.hasClass('symbol')) charater = $('span:visible', $this).html();
// Button detele
if($this.hasClass('delete')) {
var html = $writeBox.html();
$writeBox.html(html.substring(0, html.length-1));
return false;
};
// Button tab
if($this.hasClass('tab')) charater =
'\t';
// Button capslock
if($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
};
// Button enter
if($this.hasClass('enter')) charater =
'\n';
// Button shift
if($this.hasClass('left-shift') || $this.hasClass('right-shift'))
{
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ?
false : true;
capslock = false;
return
false;
};
// Button space
if($this.hasClass('space')) charater =
' ';
// 转换为大写
if($this.hasClass('uppercase')) charater = charater.toUpperCase();
// 输出所按的键值
$writeBox.html($writeBox.html() + charater);
});
});
[css]
view plaincopyprint?
* { margin:0;
padding:0;}
body { font:10px
Tahoma, Geneva, sans-serif;
background:#eee;}
#container { width:430px;
margin:10px;}
#write { border:none;
width:410px;
height:120px;
background:#fff;
padding:5px;
margin-bottom:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
border:1px
solid #f9f9f9;
font-size:11px;}
#keyboard { list-style:none;}
#keyboard li {
float:left;
width:20px;
height:20px;
line-height:20px;
text-align:center;
background:#fff;
margin:0 5px
5px 0; -moz-border-radius:5px; -webkit-border-radius:5px;
border:1px
solid #f9f9f9;}
.tab, .capslock, .left-shift, .space {
clear:left;}
#keyboard li.lastitem {
margin-right:0;}
#keyboard li.delete {
width:70px;}
#keyboard li.tab {
width:70px;}
#keyboard li.capslock {
width:75px;}
#keyboard li.enter {
width:40px;}
#keyboard li.left-shift {
width:80px;}
#keyboard li.right-shift {
width:65px;}
#keyboard li.space {
width:420px;}
#keyboard li:hover, .hover {
position:relative; top:1px; left:1px;
cursor:pointer;
border-color:#e5e5e5;}
.on { display:none;}
.uppercase {
text-transform:uppercase;}
index.html内容:
[html]
view plaincopyprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en">
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8"
/>
<title>Keyboard</title>
<link
rel="stylesheet"
type="text/css"
href="style.css"
/>
<!--[if lt ie 8]>
<style
type="text/css">
#write { margin-left:-10px;}
</style>
<![endif]-->
</head>
<body>
<div
id="container">
<textarea
id="write"
rows="6"
cols="60"></textarea>
<ul
id="keyboard">
<li
class="symbol"><span
class="off">`</span><span
class="on">~</span></li>
<li
class="symbol"><span
class="off">1</span><span
class="on">!</span></li>
<li
class="symbol"><span
class="off">2</span><span
class="on">@</span></li>
<li
class="symbol"><span
class="off">3</span><span
class="on">#</span></li>
<li
class="symbol"><span
class="off">4</span><span
class="on">{1}lt;/span></li>
<li
class="symbol"><span
class="off">5</span><span
class="on">%</span></li>
<li
class="symbol"><span
class="off">6</span><span
class="on">^</span></li>
<li
class="symbol"><span
class="off">7</span><span
class="on">&</span></li>
<li
class="symbol"><span
class="off">8</span><span
class="on">*</span></li>
<li
class="symbol"><span
class="off">9</span><span
class="on">(</span></li>
<li
class="symbol"><span
class="off">0</span><span
class="on">)</span></li>
<li
class="symbol"><span
class="off">-</span><span
class="on">_</span></li>
<li
class="symbol"><span
class="off">=</span><span
class="on">+</span></li>
<li
class="delete lastitem">delete</li>
<li
class="tab">tab</li>
<li
class="letter">q</li>
<li
class="letter">w</li>
<li
class="letter">e</li>
<li
class="letter">r</li>
<li
class="letter">t</li>
<li
class="letter">y</li>
<li
class="letter">u</li>
<li
class="letter">i</li>
<li
class="letter">o</li>
<li
class="letter">p</li>
<li
class="symbol"><span
class="off">[</span><span
class="on">{</span></li>
<li
class="symbol"><span
class="off">]</span><span
class="on">}</span></li>
<li
class="symbol lastitem"><span
class="off">\</span><span
class="on">|</span></li>
<li
class="capslock">caps lock</li>
<li
class="letter">a</li>
<li
class="letter">s</li>
<li
class="letter">d</li>
<li
class="letter">f</li>
<li
class="letter">g</li>
<li
class="letter">h</li>
<li
class="letter">j</li>
<li
class="letter">k</li>
<li
class="letter">l</li>
<li
class="symbol"><span
class="off">;</span><span
class="on">:</span></li>
<li
class="symbol"><span
class="off">'</span><span
class="on">"</span></li>
<li
class="enter lastitem">enter</li>
<li
class="left-shift">shift</li>
<li
class="letter">z</li>
<li
class="letter">x</li>
<li
class="letter">c</li>
<li
class="letter">v</li>
<li
class="letter">b</li>
<li
class="letter">n</li>
<li
class="letter">m</li>
<li
class="symbol"><span
class="off">,</span><span
class="on"><</span></li>
<li
class="symbol"><span
class="off">.</span><span
class="on">></span></li>
<li
class="symbol"><span
class="off">/</span><span
class="on">?</span></li>
<li
class="right-shift lastitem">shift</li>
<li
class="space lastitem">space</li>
</ul>
</div>
<script
type="text/javascript"
src="../js/jquery-1.3.2.min.js"></script>
<script
type="text/javascript"
src="keyboard.js"></script>
</body>
</html>
[javascript]
view plaincopyprint?
$(document).ready(function() {
var $writeBox = $('#write'),
shift = false,
capslock = false;
$('#keyboard li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}).click(function() {
var $this = $(this),
charater = $this.html();
// 一键两意
if($this.hasClass('symbol')) charater = $('span:visible', $this).html();
// Button detele
if($this.hasClass('delete')) {
var html = $writeBox.html();
$writeBox.html(html.substring(0, html.length-1));
return false;
};
// Button tab
if($this.hasClass('tab')) charater =
'\t';
// Button capslock
if($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
};
// Button enter
if($this.hasClass('enter')) charater =
'\n';
// Button shift
if($this.hasClass('left-shift') || $this.hasClass('right-shift'))
{
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ?
false : true;
capslock = false;
return
false;
};
// Button space
if($this.hasClass('space')) charater =
' ';
// 转换为大写
if($this.hasClass('uppercase')) charater = charater.toUpperCase();
// 输出所按的键值
$writeBox.html($writeBox.html() + charater);
});
});
$(document).ready(function() { var $writeBox = $('#write'), shift = false, capslock = false; $('#keyboard li').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() { var $this = $(this), charater = $this.html(); // 一键两意 if($this.hasClass('symbol')) charater = $('span:visible', $this).html(); // Button detele if($this.hasClass('delete')) { var html = $writeBox.html(); $writeBox.html(html.substring(0, html.length-1)); return false; }; // Button tab if($this.hasClass('tab')) charater = '\t'; // Button capslock if($this.hasClass('capslock')) { $('.letter').toggleClass('uppercase'); capslock = true; return false; }; // Button enter if($this.hasClass('enter')) charater = '\n'; // Button shift if($this.hasClass('left-shift') || $this.hasClass('right-shift')) { $('.letter').toggleClass('uppercase'); $('.symbol span').toggle(); shift = (shift === true) ? false : true; capslock = false; return false; }; // Button space if($this.hasClass('space')) charater = ' '; // 转换为大写 if($this.hasClass('uppercase')) charater = charater.toUpperCase(); // 输出所按的键值 $writeBox.html($writeBox.html() + charater); }); });style.css内容:
[css]
view plaincopyprint?
* { margin:0;
padding:0;}
body { font:10px
Tahoma, Geneva, sans-serif;
background:#eee;}
#container { width:430px;
margin:10px;}
#write { border:none;
width:410px;
height:120px;
background:#fff;
padding:5px;
margin-bottom:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
border:1px
solid #f9f9f9;
font-size:11px;}
#keyboard { list-style:none;}
#keyboard li {
float:left;
width:20px;
height:20px;
line-height:20px;
text-align:center;
background:#fff;
margin:0 5px
5px 0; -moz-border-radius:5px; -webkit-border-radius:5px;
border:1px
solid #f9f9f9;}
.tab, .capslock, .left-shift, .space {
clear:left;}
#keyboard li.lastitem {
margin-right:0;}
#keyboard li.delete {
width:70px;}
#keyboard li.tab {
width:70px;}
#keyboard li.capslock {
width:75px;}
#keyboard li.enter {
width:40px;}
#keyboard li.left-shift {
width:80px;}
#keyboard li.right-shift {
width:65px;}
#keyboard li.space {
width:420px;}
#keyboard li:hover, .hover {
position:relative; top:1px; left:1px;
cursor:pointer;
border-color:#e5e5e5;}
.on { display:none;}
.uppercase {
text-transform:uppercase;}
* { margin:0; padding:0;} body { font:10px Tahoma, Geneva, sans-serif; background:#eee;} #container { width:430px; margin:10px;} #write { border:none; width:410px; height:120px; background:#fff; padding:5px; margin-bottom:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9f9f9; font-size:11px;} #keyboard { list-style:none;} #keyboard li { float:left; width:20px; height:20px; line-height:20px; text-align:center; background:#fff; margin:0 5px 5px 0; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9f9f9;} .tab, .capslock, .left-shift, .space { clear:left;} #keyboard li.lastitem { margin-right:0;} #keyboard li.delete { width:70px;} #keyboard li.tab { width:70px;} #keyboard li.capslock { width:75px;} #keyboard li.enter { width:40px;} #keyboard li.left-shift { width:80px;} #keyboard li.right-shift { width:65px;} #keyboard li.space { width:420px;} #keyboard li:hover, .hover { position:relative; top:1px; left:1px; cursor:pointer; border-color:#e5e5e5;} .on { display:none;} .uppercase { text-transform:uppercase;}
index.html内容:
[html]
view plaincopyprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en">
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8"
/>
<title>Keyboard</title>
<link
rel="stylesheet"
type="text/css"
href="style.css"
/>
<!--[if lt ie 8]>
<style
type="text/css">
#write { margin-left:-10px;}
</style>
<![endif]-->
</head>
<body>
<div
id="container">
<textarea
id="write"
rows="6"
cols="60"></textarea>
<ul
id="keyboard">
<li
class="symbol"><span
class="off">`</span><span
class="on">~</span></li>
<li
class="symbol"><span
class="off">1</span><span
class="on">!</span></li>
<li
class="symbol"><span
class="off">2</span><span
class="on">@</span></li>
<li
class="symbol"><span
class="off">3</span><span
class="on">#</span></li>
<li
class="symbol"><span
class="off">4</span><span
class="on">{1}lt;/span></li>
<li
class="symbol"><span
class="off">5</span><span
class="on">%</span></li>
<li
class="symbol"><span
class="off">6</span><span
class="on">^</span></li>
<li
class="symbol"><span
class="off">7</span><span
class="on">&</span></li>
<li
class="symbol"><span
class="off">8</span><span
class="on">*</span></li>
<li
class="symbol"><span
class="off">9</span><span
class="on">(</span></li>
<li
class="symbol"><span
class="off">0</span><span
class="on">)</span></li>
<li
class="symbol"><span
class="off">-</span><span
class="on">_</span></li>
<li
class="symbol"><span
class="off">=</span><span
class="on">+</span></li>
<li
class="delete lastitem">delete</li>
<li
class="tab">tab</li>
<li
class="letter">q</li>
<li
class="letter">w</li>
<li
class="letter">e</li>
<li
class="letter">r</li>
<li
class="letter">t</li>
<li
class="letter">y</li>
<li
class="letter">u</li>
<li
class="letter">i</li>
<li
class="letter">o</li>
<li
class="letter">p</li>
<li
class="symbol"><span
class="off">[</span><span
class="on">{</span></li>
<li
class="symbol"><span
class="off">]</span><span
class="on">}</span></li>
<li
class="symbol lastitem"><span
class="off">\</span><span
class="on">|</span></li>
<li
class="capslock">caps lock</li>
<li
class="letter">a</li>
<li
class="letter">s</li>
<li
class="letter">d</li>
<li
class="letter">f</li>
<li
class="letter">g</li>
<li
class="letter">h</li>
<li
class="letter">j</li>
<li
class="letter">k</li>
<li
class="letter">l</li>
<li
class="symbol"><span
class="off">;</span><span
class="on">:</span></li>
<li
class="symbol"><span
class="off">'</span><span
class="on">"</span></li>
<li
class="enter lastitem">enter</li>
<li
class="left-shift">shift</li>
<li
class="letter">z</li>
<li
class="letter">x</li>
<li
class="letter">c</li>
<li
class="letter">v</li>
<li
class="letter">b</li>
<li
class="letter">n</li>
<li
class="letter">m</li>
<li
class="symbol"><span
class="off">,</span><span
class="on"><</span></li>
<li
class="symbol"><span
class="off">.</span><span
class="on">></span></li>
<li
class="symbol"><span
class="off">/</span><span
class="on">?</span></li>
<li
class="right-shift lastitem">shift</li>
<li
class="space lastitem">space</li>
</ul>
</div>
<script
type="text/javascript"
src="../js/jquery-1.3.2.min.js"></script>
<script
type="text/javascript"
src="keyboard.js"></script>
</body>
</html>
相关文章推荐
- 通过SlimerJS触发键盘事件使优酷视频快进(问题未解决)
- js做的打字小游戏~按下键盘的时候为什么没有反应,附上我的代码
- 步步为营:JS键盘各键对应的代码
- 使用JS监听键盘两个组合键触发的事件
- js监听键盘动作
- js获取及判断键盘按键的方法
- js中使用键盘键,每个键的值
- js 键盘码对应表
- JS实现键盘监听
- js 获取任意键盘的值
- js 模拟键盘事件
- 微信小程序——车牌键盘输入js+css
- js捕捉键盘事件和按键键值
- js中键盘按键对应的键值
- JS监听键盘事件
- 关于JS里面的键盘事件
- JS获取任意键盘的值
- Silverlight中键盘事件的js开发
- TextBox JS前台赋值触发Onchange事件,屏蔽键盘操作
- js 判断键盘事件大全 兼容FireFox和IE(退格、制表、回车、空格、方向键、删除键等)