根据上上篇的键盘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谢谢