自写一个简单点的网页软键盘

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

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

AخA
 
<!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;

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

自写一个简单点的网页软键盘

分类

网站常用

描述

自写一个简单点的网页软键盘，没有使用任何控件，仅是为了练习JavaScript编写水平，安全性方面没有过多考虑，有顾虑的可以不用，目的是学习，希望对您有用处。