js软键盘数字键盘资源-CSDN文库

共5个文件

js：2个

png：1个

html：1个

4星 · 超过85%的资源需积分: 14 158 浏览量 2010-04-29 13:16:34 上传评论 7 收藏 3KB RAR 举报

JavaScript（简称JS）是一种轻量级的解释型编程语言，常用于网页和网络应用开发。在移动设备或网页中，由于安全原因，通常不允许直接访问硬件键盘，因此开发者需要为输入框提供虚拟键盘，以便用户在触摸屏上进行输入。本主题主要探讨如何使用JavaScript实现一个数字软键盘。描述中提到的“全是超链接完成”是指利用HTML的`<a>`标签来模拟键盘按键。这种做法的优点是交互直观，用户点击链接即可触发相应的数字输入，而无需处理复杂的事件绑定。 1. HTML 结构：创建数字键盘的第一步是构建HTML布局。你可以创建一个包含0-9数字、回车键和清除键的`<div>`容器，每个数字作为一个`<a>`标签，例如： ```html <div id="keyboard"> <a href="#" data-value="1">1</a> <a href="#" data-value="2">2</a> ... <a href="#" data-value="0">0</a> <a href="#" data-value="clear">清除</a> <a href="#" data-value="enter">回车</a> </div> ``` 2. CSS 样式：为了让键盘看起来更像实际的键盘，可以通过CSS进行美化，包括设置字体、颜色、边框、布局等样式。 3. JavaScript 事件处理：接下来，我们需要监听这些`<a>`标签的点击事件。使用`addEventListener`方法，为每个数字键和功能键添加点击事件处理函数。在处理函数中，获取到被点击键的值，并将其插入到目标输入框中。例如： ```javascript document.querySelectorAll('#keyboard a').forEach(key => { key.addEventListener('click', function(e) { e.preventDefault(); // 阻止默认的跳转行为 let value = this.getAttribute('data-value'); if (value === 'clear') { document.getElementById('inputField').value = ''; } else if (value === 'enter') { // 处理回车事件，如提交表单 } else { document.getElementById('inputField').value += value; } }); }); ``` 4. 动态显示与隐藏：为了提高用户体验，软键盘应能根据用户需求动态显示和隐藏。可以添加一个按钮，当点击时通过改变CSS的`display`属性控制键盘的可见性。 5. 兼容性和优化：考虑到不同浏览器和设备的兼容性，可能需要对代码进行一些调整，例如使用`addEventListener`的替代方法（如`attachEvent`）来支持旧版IE浏览器。同时，可以考虑优化键盘的响应速度和性能，如使用事件委托来减少事件监听器的数量。通过JavaScript实现数字软键盘是一个涉及到HTML结构、CSS样式和JavaScript事件处理的过程。通过合理的布局和事件处理，我们可以创建一个功能齐全、易于使用的虚拟数字键盘，为用户在网页上的数字输入提供便利。

资源推荐

资源详情

资源评论

收起资源包目录

vkey_键盘.rar （5个子文件）

vkey

vkey_icon.png 264B

vkey.css 598B

drag.js 874B

vkey.js 1KB

vkey_demo.html 4KB

<html> <head> <title>vkey demo</title> <link rel="stylesheet" href="vkey.css" type="text/css" /> <script type="text/javascript" src="vkey.js"></script> <script type="text/javascript" src="drag.js"></script> </head> <body> <form name="form1" method="post" action=""> <label> <input type="text" name="textfield"> </label> <p> <label> <input type="text" name="textfield2"> </label> </p> <p> <label> <input type="button" name="Submit" value="小键盘" onClick="vkey_load()"> </label> <label> <input type="button" name="Submit2" value="X" onClick="vkey_unload()"> </label> </p> <p> <label> <input type="button" name="Submit3" value="日期时间"> </label> </p> </form> <div id="vkey" onMouseDown="drag_start(this)"> <a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">1</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">2</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">3</a><br /><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">4</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">5</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">6</a><br /><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">7</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">8</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">9</a><br /><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">0</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">.</a><a href="javascript:void(0)" onClick="vkey_unload()" class="vkey_key">-</a> </div> <div id="vkeydate" onMouseDown="drag_start(this)"> <p><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">年</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">月</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">日</a><br /> <a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">天</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">小时</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">分</a><br /> <a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">秒</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">次</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">凌晨</a><br /> <a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">上午</a><a href="javascript:void(0)" onClick="vkey_add(this)" class="vkey_key">中午</a><a href="javascript:void(0)" onClick="vkey_unload()" class="vkey_key">下午</a> </p> <p> </p> </div> <script language="javascript"> var name="李大龙"; var name2="李小龙"; var name3="爷爷"; document.write("我爱\'JavaScript\'") document.write("文件在c:\\windows\\下") document.write("<pre>未满十八岁\n不得进入！</pre>") document.write("未满十八岁<br>不得进入！") document.write("\n") document.write(name+"是"+name2+"的"+name3) document.alert("密码不对\n请重新输入！") </script> <Script> var now = new Date(); var day = now.getDay(); var dayName; if (day == 0) dayName = "星期日"; else if (day == 1) dayName = "星期一"; else if (day == 2) dayName = "星期二"; else if (day == 3) dayName = "星期三"; else if (day == 4) dayName = "星期四"; else if (day == 5) dayName = "星期五"; else dayName = "星期六"; document.write () document.write ("\n\n\n\n\n\n\n今天是快乐的", dayName) </Script> </body> </html>

评论收藏

内容反馈