您的位置：首页 > Web前端 > JavaScript

使用JS构建简单的虚拟小键盘

2016-06-25 19:33 399 查看

第一章 介绍

            前段时间，在公司实习，被安排做一个虚拟小键盘，来输入身份证号，主要采用JS来实现点击按键实现功能。以这篇博客记录一下实现的过程。

第二章 实现思路

            将小键盘的按键以按钮的形式构建出来，为每个按钮绑定相应的点击事件。

第三章 代码

          
<html>
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">

function btnEnter_onclick() {
var value = document.getElementById("txtNum").value;
alert(value);
}

function btnNum_onclick(i) {
txtNum.value=txtNum.value+i;
}

function clearText() {
document.getElementById("txtNum").value = "";
}

function delText() {
var value = document.getElementById("txtNum").value;
var str = value.substring(0,value.length-1);
document.getElementById("txtNum").value = str;
}
</script>
</head>
<body>
<p style="height: 60px">
<input id="txtNum" type="text" />
<input id="btnEnter" type="button" value="Enter" onclick="return btnEnter_onclick()" />
<table>
<tr>
<td> <input id="Button1" type="button" value="1" onclick="return btnNum_onclick(1)" /></td>
<td> <input id="Button2" type="button" value="2" onclick="return btnNum_onclick(2)"/></td>
<td> <input id="Button3" type="button" value="3" onclick="return btnNum_onclick(3)"/></td>
<td> <input id="ButtonDel" type="button" value="Del" onclick="return delText()"/></td>
</tr>
<tr>
<td> <input id="Button4" type="button" value="4" onclick="return btnNum_onclick(4)"/></td>
<td> <input id="Button5" type="button" value="5" onclick="return btnNum_onclick(5)"/></td>
<td> <input id="Button6" type="button" value="6" onclick="return btnNum_onclick(6)"/></td>
</tr>
<tr>
<td><input id="Button7" type="button" value="7" onclick="return btnNum_onclick(7)"/></td>
<td><input id="Button8" type="button" value="8" onclick="return btnNum_onclick(8)"/></td>
<td><input id="Button9" type="button" value="9" onclick="return btnNum_onclick(9)"/></td>
</tr>
<tr>
<td><input id="Button0" type="button" value="0" onclick="return btnNum_onclick(0)" /></td>
<td><input id="Buttonx" type="button" value="X" onclick="return btnNum_onclick('X')"/></td>
<td><input id="ButtonClear" type="button" value="Clear" onclick="return clearText()"/></td>
</tr>
<br /><br />

</p>

</body>
</html>

第四章 小结

        这次虚拟小键盘是很简单的小开发，希望我的博客能见证我一点一点的进步。如果有不足之处，请大家指出，谢谢！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  java javascript
相关文章推荐
新的分享
章节导航