首页 > Web开发 > 详细

Jquery键盘输入

时间:2020-04-11 15:34:43      阅读:60      评论:0      收藏:0      [点我收藏+]

根据上上篇的键盘ui界面我添加了一个输入框让键盘有了输入效果如下

  技术分享图片

 

 

 界面代码可以去上上篇看:  https://www.cnblogs.com/2979100039-qq-con/p/12641603.html

这那个代码基础上加了一个输入框,在把键盘缩放0.7倍就可以了

接下重点是js代码同样用的是jquery写的需要到jq框架

技术分享图片

 

 

 jquery代码很简单只是一些点击事件和获取改变输入框的value值来进行输入效果

$(function(){
/* 点击键盘赋值 */
function chagekey(btn){
var inp_value = $("#inp").val();
var t = btn.html();
var map = inp_value+t;
$("#inp").attr("value",map);
}
/* 键盘移动方法*/
$(".f_div").mousedown(function(event){
var staetX = event.pageX-$(this).offset().left;
var staetY = event.pageY-$(this).offset().top;
$(this).mousemove(function(event){
var x = event.pageX - staetX;
var y = event.pageY - staetY;
$(this).offset({left:x,top:y});
});
}).mouseup(function(){
$(this).off("mousemove");
});
/* 选中输入框键盘出现 */
$("#inp").on("click",function(){
var input = $(this);
$(".f_div").show();
/* 获取按钮索引来排除无法输入的按钮 */
var jpnub = $("#s_div button").length;

$("#s_div button").unbind("click");

var xfkb_text = input.val(); //获取input框当前的val值

$("#s_div button").click(function () {
var click = $(this).html();
var butindex = $(this).index(); //获取点击按键的内容
//特殊按键在这添加事件
//判断点击的按键是否有特殊事件,如果没有则按键内容加在input文本后面
if (butindex == 14 || butindex == 28 || butindex == 41 || butindex == 55||
butindex == 52 || butindex == 53 || butindex == 54 || butindex == 59||
butindex == 57 || butindex == 58 || butindex == 59 || butindex == 60 ) {
}else if(butindex == 56){
xfkb_text = xfkb_text + " ";
input.val(xfkb_text);
}else if(butindex == 13){
xfkb_text = "";
input.val(xfkb_text);
}else if(butindex == 40){
$(".f_div").hide();
}else {
xfkb_text = xfkb_text + click;
input.val(xfkb_text);
}
input.focus();
});
/* 按capslk大小写切换 */
var t = 0;
$("#toggle_case").click(function(){
if(t == 0){
t=1;
$.each($("#s_div button"), function(b, c) {
$(c).text($(c).text().toLowerCase());
});
}else{
t=0;
$.each($("#s_div button"), function(b, c) {
$(c).text($(c).text().toUpperCase());
});
}
});
});
});

     后面还会继续优化这个键盘,当我学到了东西优化

        在写这个的时候我看了好多个版本的案例,最后写成了这个样子,虽然写完后简单,但每次遇到一些自己没有接触过的知识

总要去了解,去搞清楚比如这个聚焦input.focus();知识总是一点点的积累,当你动手时,不管你会还是不会,你就成功了一半了 

一个新手,代码不足之处可以指出QAQ谢谢

Jquery键盘输入

原文:https://www.cnblogs.com/2979100039-qq-con/p/12679692.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!