According to the keyboard ui interface of the previous article, I added an input box to make the keyboard have the input effect as follows
The interface code can go to the previous article: https://www.cnblogs.com/2979100039-qq-con/p/12641603.html
An input box is added to this code, and the keyboard can be scaled by 0.7 times
The next point is that the js code also uses jquery to write to the jq framework
The jquery code is very simple, just some click events and get to change the value of the input box to enter the effect
$ (function () {
/ * Click on the keyboard to assign * /
function chagekey (btn) {
var inp_value = $ ("# inp"). val ();
var t = btn.html ();
var map = inp_value + t;
$ ("# inp"). attr ("value", map);
}
/ * Keyboard movement method * /
$ (". 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");
}) ;
/ * The keyboard with the selected input box appears * /
$ ("# inp"). On ("click",function(){
var input = $(this);
$ (". f_div"). show ();
/ * Get the button index to exclude buttons that cannot be entered * /
var jpnub = $ ("# s_div button"). length;
$ ("# s_div button"). unbind ( "click");
var xfkb_text = input.val (); // Get the current val value of the input box
$ ("# s_div button"). click (function () {
var click = $ (this) .html ();
var butindex = $ ( this) .index (); // Get the content of the clicked key
// Special key add event here
// Judge whether the clicked key has special event, if not, the key content is added after the input text
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());
});
}
});
});
});
I will continue to optimize this keyboard later, when I learned something to optimize
When I wrote this, I read a lot of cases, and finally wrote it like this. Although it is simple after writing, I encounter some knowledge that I have not touched every time.
Always go to understand, to figure out, for example, this focus input.focus (); knowledge is always a little accumulation, when you do it, whether you will or not, you are half successful
A novice, the lack of code can point out QAQ thanks