javascript实现软键盘

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_43424506/article/details/102655109

javascript实现软键盘效果

使用HBuilder工具使用html+加内部css样式简单实现 练习JavaScript编写

css样式代码

<style>
			* {
				padding: 0;
				margin: 0;
				
			}
			
			body {
				background: #fff;
				text-align:center;
				width: 500px;
				height: 400px;
			}
			
			th,
			td {
				border: 1px solid #ccc;
				padding: 2px 0;
				text-align: center;
					background-color:  antiquewhite;
			}
			
			td {
				cursor: pointer
			}
			
			div {
				border: 1px solid #999;
				float: left;
				padding: 1px;
				display: none;
			}
			.num {
				color: blue;
			}
		</style>

java代码

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

<center>
	<input id="input" readonly="readonly" style="width: 400px; height: 400px;"  />
	<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>
		</center>

实现效果##