JS 软键盘

keyboard.js内容

[javascript] view plain copy print ?

1. $(document).ready(function() { 
2.                  
3.     var $writeBox = $('#write'), 
4.         shift = false, 
5. capslock = false; 
6.          
7.     $('#keyboard li').hover(function() { 
8.         $(this).addClass('hover'); 
9.     }, function() { 
10.         $(this).removeClass('hover'); 
11.     }).click(function() { 
12.         var $this = $(this), 
13.             charater = $this.html(); 
14.          
15.         // 一键两意 
16.         if($this.hasClass('symbol')) charater = $('span:visible', $this).html(); 
17.          
18.         // Button detele  
19.         if($this.hasClass('delete')) { 
20.             var html = $writeBox.html(); 
21.             $writeBox.html(html.substring(0, html.length-1)); 
22.             return false; 
23.         }; 
24.          
25.         // Button tab 
26.         if($this.hasClass('tab')) charater = '\t'; 
27.          
28.         // Button capslock 
29.         if($this.hasClass('capslock')) { 
30.             $('.letter').toggleClass('uppercase'); 
31.             capslock = true; 
32.             return false; 
33.         }; 
34.          
35.         // Button enter 
36.         if($this.hasClass('enter')) charater = '\n'; 
37.          
38.         // Button shift 
39.         if($this.hasClass('left-shift') || $this.hasClass('right-shift')) { 
40.             $('.letter').toggleClass('uppercase'); 
41.             $('.symbol span').toggle(); 
42.              
43.             shift = (shift === true) ? false : true; 
44.             capslock = false; 
45.             return false; 
46.         }; 
47.          
48.         // Button space 
49.         if($this.hasClass('space')) charater = ' '; 
50.          
51.         // 转换为大写 
52.         if($this.hasClass('uppercase')) charater = charater.toUpperCase(); 
53.          
54.         // 输出所按的键值 
55.         $writeBox.html($writeBox.html() + charater); 
56.          
57.     }); 
58.      
59. }); 

$(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 plain copy print ?

1. * { margin:0; padding:0;} 
2. body { font:10px Tahoma, Geneva, sans-serif; background:#eee;} 
3.  
4. #container { width:430px; margin:10px;} 
5.      
6.     #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;} 
7.          
8.         #keyboard { list-style:none;} 
9.             #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;} 
10.              
11.             .tab, .capslock, .left-shift, .space { clear:left;} 
12.              
13.             #keyboard li.lastitem { margin-right:0;} 
14.             #keyboard li.delete { width:70px;} 
15.             #keyboard li.tab { width:70px;} 
16.             #keyboard li.capslock { width:75px;} 
17.             #keyboard li.enter { width:40px;} 
18.             #keyboard li.left-shift { width:80px;} 
19.             #keyboard li.right-shift { width:65px;} 
20.             #keyboard li.space { width:420px;} 
21.              
22.             #keyboard li:hover, .hover { position:relative; top:1px; left:1px; cursor:pointer; border-color:#e5e5e5;} 
23.              
24.             .on { display:none;} 
25.             .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 plain copy print ?

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
3. <head> 
4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
5.     <title>Keyboard</title> 
6.     <link rel="stylesheet" type="text/css" href="style.css" /> 
7.      
8.     <!--[if lt ie 8]> 
9.     <style type="text/css"> 
10.         #write { margin-left:-10px;} 
11.     </style> 
12.     <![endif]--> 
13. </head> 
14. <body> 
15.  
16. <div id="container"> 
17.     <textarea id="write" rows="6" cols="60"></textarea> 
18.     <ul id="keyboard"> 
19.         <li class="symbol"><span class="off">`</span><span class="on">~</span></li> 
20.         <li class="symbol"><span class="off">1</span><span class="on">!</span></li> 
21.         <li class="symbol"><span class="off">2</span><span class="on">@</span></li> 
22.         <li class="symbol"><span class="off">3</span><span class="on">#</span></li> 
23.         <li class="symbol"><span class="off">4</span><span class="on">{1}lt;/span></li> 
24.         <li class="symbol"><span class="off">5</span><span class="on">%</span></li> 
25.         <li class="symbol"><span class="off">6</span><span class="on">^</span></li> 
26.         <li class="symbol"><span class="off">7</span><span class="on">&</span></li> 
27.         <li class="symbol"><span class="off">8</span><span class="on">*</span></li> 
28.         <li class="symbol"><span class="off">9</span><span class="on">(</span></li> 
29.         <li class="symbol"><span class="off">0</span><span class="on">)</span></li> 
30.         <li class="symbol"><span class="off">-</span><span class="on">_</span></li> 
31.         <li class="symbol"><span class="off">=</span><span class="on">+</span></li> 
32.         <li class="delete lastitem">delete</li> 
33.         <li class="tab">tab</li> 
34.         <li class="letter">q</li> 
35.         <li class="letter">w</li> 
36.         <li class="letter">e</li> 
37.         <li class="letter">r</li> 
38.         <li class="letter">t</li> 
39.         <li class="letter">y</li> 
40.         <li class="letter">u</li> 
41.         <li class="letter">i</li> 
42.         <li class="letter">o</li> 
43.         <li class="letter">p</li> 
44.         <li class="symbol"><span class="off">[</span><span class="on">{</span></li> 
45.         <li class="symbol"><span class="off">]</span><span class="on">}</span></li> 
46.         <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li> 
47.         <li class="capslock">caps lock</li> 
48.         <li class="letter">a</li> 
49.         <li class="letter">s</li> 
50.         <li class="letter">d</li> 
51.         <li class="letter">f</li> 
52.         <li class="letter">g</li> 
53.         <li class="letter">h</li> 
54.         <li class="letter">j</li> 
55.         <li class="letter">k</li> 
56.         <li class="letter">l</li> 
57.         <li class="symbol"><span class="off">;</span><span class="on">:</span></li> 
58.         <li class="symbol"><span class="off">'</span><span class="on">"</span></li> 
59.         <li class="enter lastitem">enter</li> 
60.         <li class="left-shift">shift</li> 
61.         <li class="letter">z</li> 
62.         <li class="letter">x</li> 
63.         <li class="letter">c</li> 
64.         <li class="letter">v</li> 
65.         <li class="letter">b</li> 
66.         <li class="letter">n</li> 
67.         <li class="letter">m</li> 
68.         <li class="symbol"><span class="off">,</span><span class="on"><</span></li> 
69.         <li class="symbol"><span class="off">.</span><span class="on">></span></li> 
70.         <li class="symbol"><span class="off">/</span><span class="on">?</span></li> 
71.         <li class="right-shift lastitem">shift</li> 
72.         <li class="space lastitem">space</li> 
73.     </ul> 
74. </div> 
75.  
76. <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> 
77. <script type="text/javascript" src="keyboard.js"></script> 
78. </body> 
79. </html>