最近在做一个触摸屏的项目 需要用到一个虚拟的输入键盘 着手写了一个 不吝赐教
js代码
<script type="text/javascript">
//身份证追加
function addCard(numval){
var num=$('#cards').val();
var index=$("#index").val();
alert(index);
if(index!='' && index!=0){
num=(num.substr(0,index))+numval+(num.substr(index,num.length));
++index;
$("#index").val(index);
}else{
num=num+numval;
}
if(num.length<19){
$('#cards').val(num);
}
}
//去掉身份证不正确的值
function backspace(){
var num=$('#cards').val();
if(num!=''){
var index=$("#index").val();
num=num.substr(0,index-1)+num.substr(index,num.length);
$('#cards').val(num);
$("#index").val(index!=0?index-1:index);
}
}
// 获取光标在文本框的位置
function _getFocus(elem) {
var index = 0;
if (document.selection) {// IE Support
elem.focus();
var Sel = document.selection.createRange();
if (elem.nodeName === 'text') {//textarea
var Sel2 = Sel.duplicate();
Sel2.moveToElementText(elem);
var index = -1;
while (Sel2.inRange(Sel)) {
Sel2.moveStart('character');
index++;
};
}else if (elem.nodeName === 'INPUT') {// input
Sel.moveStart('character', -elem.value.length);
index = Sel.text.length;
}
}else if (elem.selectionStart || elem.selectionStart == '0') { // Firefox support
index = elem.selectionStart;
}
//alert(index);
//return (index);
$("#index").val(index);
}
</script>
css
<style type="text/css">
.middletop_inputText{ width:1160px; height:250px; margin-top:30px;font-family:"微软雅黑", "宋体"; font-size:25px; color:#FFFF00;}
.middletop-center{ width:1160px; height:250px; text-align:center; margin-top:40px;}
.middlecenteru1{ width:337px; height:281px; }
.middlexia_inputText{ width:1160px; min-height:200px; margin-top:5px;}
.dev_text{ width:1160px; min-height:100px; margin-top:5px;}
.dev_textInput{border:1px solid white;width: 800px; min-height: 45px;margin-top: 45px;float: left;}
.dev_textInputs{width: 260px; height: 45px;margin-top: 45px;float: right;}
.dev_textFrist{width: 270px; height: 45px;margin-top: 55px;float: left;}
.middlexiatu1{
height:281px; width:337px;border:1px solid red;
margin-left:7px;
}
.spanCard_inputText{ font-family:"微软雅黑", "宋体"; font-size:20px; color: white;}
img{position:relative;}
.keyCenter{
border:1px solid white;
min-height:135px;
width:820px;
margin-top: 5px;
margin-left: 7px;
/*background: white;*/}
.card_text{
height:35px;
width:390px;
float:left;
font-size: 24px;
margin-top:4px;
/*font-family:"微软雅黑", "宋体"; font-size:24px; color:#000;*/
}
.card_center{
min-height:260px;
width:399px;
float:left;
font-size: 24px;
margin-left: 45px;
/*font-family:"微软雅黑", "宋体"; font-size:24px; color:#000;*/
}
.key{
min-height:250px;
width:340px;
float:right;
font-size: 24px;
}
.keys{
height:60px;
width:300px;
font-size: 24px;
margin-left:15px;
margin-top:4px;
}
.keyImg{
float:right;
margin-top:10px;
margin-right:2px;
cursor:pointer;
}
.centerKey{
border:1px solid white;
height:135px;
width:600px;
margin-top:2px;
display:none;
margin-left: 7px;
background: white;margin-bottom: 5px;}
.topKey{
margin-top:5px;
height:60px;
width:300px;
margin-left:130px;}
.buttomKey{
margin-top:5px;
height:60px;
width:595px;
}
.keyValue{
height:60px;
width:60px;
float:right;
margin-right:30px;}
</style>
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="../css/public.css" type="text/css"></link>
</head>
<body>
<div class="bgmain">
<input type="hidden" id="index"/>
<div class="middle">
<div class="middle-center">
<div class="middlexia_inputText">
<div class="dev_text">
<div class="dev_textFrist"><span style="color:red;font-size:25px;margin-top: 10px;"><strong>您的身份证号是：</strong></span></div>
<div class="dev_textInput">
<div class="card_center">
<input type="text" class='card_text' id="cards" onfocus="_getFocus(this)"/>
</div>
<div class="key">
<div class="keys">
<div class="keyValue" onclick="addCard('3')"><img src="keyImg/3.png"/></div>
<div class="keyValue" onclick="addCard('2')"><img src="keyImg/2.png"/></div>
<div class="keyValue" onclick="addCard('1')"><img src="keyImg/1.png"/></div>
</div>
<div class="keys">
<div class="keyValue" onclick="addCard('6')"><img src="keyImg/6.png"/></div>
<div class="keyValue" onclick="addCard('5')"><img src="keyImg/5.png"/></div>
<div class="keyValue" onclick="addCard('4')"><img src="keyImg/4.png"/></div>
</div>
<div class="keys">
<div class="keyValue" onclick="addCard('9')"><img src="keyImg/9.png"/></div>
<div class="keyValue" onclick="addCard('8')"><img src="keyImg/8.png"/></div>
<div class="keyValue" onclick="addCard('7')"><img src="keyImg/7.png"/></div>
</div>
<div class="keys">
<div class="keyValue" onclick="backspace()"><img src="keyImg/12.png" /></div>
<div class="keyValue" onclick="addCard('0')"><img src="keyImg/0.png"/></div>
<div class="keyValue" onclick="addCard('x')"><img src="keyImg/10.png"/></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
总结起来，"js键盘控制6键弹钢琴特效"项目是一个结合了JavaScript键盘事件处理、Web Audio API音乐合成和HTML/CSS网页设计的综合应用。通过监听键盘输入，生成并控制音频节点，配合视觉效果，模拟出真实的钢琴演奏...
一、原生JavaScript键盘事件 1. `keydown`事件：当用户按下键盘上的一个键时触发。 2. `keyup`事件：当用户释放键盘上的一个键时触发。 3. `keypress`事件：对于可打印字符，此事件在`keydown`之后、`keyup`之前...
使用 jQuery 编写的 JS 键盘可以让这个功能实现更加简便，因为 jQuery 是一个强大的 JavaScript 库，提供了丰富的 DOM 操作、事件处理和动画效果。 一、jQuery 基础知识 jQuery 是一个轻量级的 JavaScript 库，它的...
本文将详细介绍如何通过JavaScript的键盘事件来控制网页上人物的移动和跳跃，具体实现2D效果。为此，我们将通过示例代码来展示整个过程。首先，我们需要建立一个HTML文档，并通过CSS来设定基本的样式。然后，通过...
### JavaScript键盘事件与按键代码详解 #### 一、概述 在网页开发中，键盘事件的处理是一项非常重要的功能。通过捕获用户输入的信息，开发者可以实现丰富的交互效果，例如快捷键响应、表单验证等。JavaScript 提供...
### JS键盘事件详解 在JavaScript编程中，键盘事件是非常重要的交互元素之一，它们允许开发者捕捉用户的键盘输入行为，并根据这些输入执行相应的操作。本文将详细解释JS中的键盘事件及其应用场景。 #### 一、键盘...
本文将深入探讨“JavaScript键盘表”中的关键知识点，帮助开发者更好地掌握如何识别和响应不同的键盘按键。 ### 1. 键盘事件 在JavaScript中，键盘事件主要通过`keydown`、`keyup`和`keypress`三个事件来监听。...
只需要引入js文件 没有switch case 没有if 只用关心键盘响应函数 欢迎提出意见 <title>key test <script src="keyProcess.js"> //一次性设置a-z的所有符号 var arr = []; //a的keyCode是65，所以先设置...
js键盘回车事件,下载即可用，简单实用...
本篇文章将深入探讨一个自定义的JavaScript键盘监听事件处理函数`addkey`，该函数采用了一种不使用`eval`的安全方法来实现对键盘按键的监听。在Web开发中，监听键盘事件是一种常见的需求，比如在游戏中控制角色移动...
JS 键盘事件全面控制 兼容 FireFox 和 IE JS 键盘事件是指在网页中捕捉用户按键操作的事件，并对其进行相应的处理。JS 键盘事件可以分为三种类型：keydown、keypress 和 keyup，它们分别对应 onkeydown、onkeypress...
【标题】"js键盘控制6键弹钢琴特效.zip"是一个基于JavaScript实现的互动式钢琴模拟器，它允许用户通过键盘来演奏音乐。这个特效适用于网页应用，为用户提供一个虚拟的六键钢琴界面，增强了用户的交互体验。 【描述...
总的来说，JavaScript键盘控制是通过监听键盘事件并响应用户输入来实现的。通过理解并利用这些事件和相关属性，开发者可以创建丰富的交互体验，如游戏控制、快捷键系统或者自定义输入处理。在实际项目中，务必注意...
"JS键盘事件_寒风.htm"可能是一个关于JavaScript键盘事件的教程，帮助理解如何处理键盘输入。其他文件如"AP1.0-应用平台API参考手册-V1.0.doc"和"prototype_百度百科.htm"可能是关于JavaScript API和其他相关技术的...
**JS虚拟键盘与中文拼音输入详解** 在网页开发中，有时候出于安全或用户体验考虑，我们需要为用户在浏览器端提供一个虚拟键盘。这尤其适用于输入敏感信息的场景，如在线支付或登录界面，防止键盘记录器窃取数据。...
这篇名为“javascript键盘事件管理工具”的博文可能探讨了一种结构化和可扩展的方式来管理和处理键盘事件。这样的工具通常会提供一个中心化的注册系统，允许开发者注册和管理不同的键盘事件和相应的回调函数。这样做...
以上内容只是JavaScript键盘交互的基础。实际上，你可以通过更多的技术，如防抖(debounce)或节流(throttle)来优化性能，或者利用CSS和HTML5 API来增强用户体验。总之，JavaScript提供了强大的能力，使网页能够响应...
这是一款常见的JavaScript 网页软键盘插件，提高输入安全性，可设置是否大写的值，并用正则表达式将前后空格 用空字符串替代，给输入的密码框添加新值，定义当前是否大写的状态等功能，这个小键盘的美化完全基石...
### JavaScript键盘码对照表 在JavaScript开发中，处理键盘事件是一项常见的需求，尤其是在涉及用户交互的应用场景中。本文将详细介绍一份JavaScript键盘码对照表，帮助开发者更好地理解和利用这些键盘码来增强项目...