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

2020-01-27 13:44:30

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：slide文字框缩放伸展效果

下一篇：新浪微博大厅文字内容滚动 tweets-slide