Selon l'interface utilisateur du clavier de l'article précédent, j'ai ajouté une zone de saisie pour que le clavier ait l'effet d'entrée comme suit
Le code d'interface peut aller à l'article précédent: https://www.cnblogs.com/2979100039-qq-con/p/12641603.html
Une zone de saisie est ajoutée à ce code et le clavier peut être redimensionné de 0,7 fois
Le point suivant est que le code js utilise également jquery pour écrire dans le framework jq
Le code jquery est très simple, il suffit de quelques événements de clic et de changer la valeur de la zone de saisie pour entrer l'effet
$ (function () {
/ * Cliquez sur le clavier pour affecter * /
function chagekey (btn) {
var inp_value = $ ("# inp"). val ();
var t = btn.html ();
var map = inp_value + t;
$ ("# inp"). attr ("value", map);
}
/ * Méthode de déplacement du clavier * /
$ (". 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");
}) ;
/ * Le clavier avec la zone de saisie sélectionnée apparaît * /
$ ("# inp"). Sur ("click",function () {
var input = $ (this);
$ (". f_div"). show ();
/ * Récupère l'index des boutons pour exclure les boutons qui ne peuvent pas être saisis * /
var jpnub = $ ("# s_div button"). length;
$ ("# s_div button"). unbind ( "cliquer");
var xfkb_text = input.val (); // Récupère la valeur de val actuelle de la zone de saisie
$ ("# s_div button"). click (function () {
var click = $ (this) .html ();
var butindex = $ ( this) .index (); // Récupère le contenu de la clé cliquée
// Clé spéciale ajoute un événement ici
// Juge si la clé cliquée a un événement spécial, sinon, le contenu de la clé est ajouté après le texte d'entrée
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 ();
}autre {
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")), fonction (b, c) {
$ (c) .text ($ (c) .text (). toLowerCase ());
});
} else {
t = 0;
$ .each ($ ("bouton # s_div"), fonction (b, c) {
$ (c ) .text ($ (c) .text (). toUpperCase ());
});
}
});
});
});
Je continuerai d'optimiser ce clavier plus tard, quand j'aurai appris quelque chose à optimiser
Quand j'ai écrit ceci, j'ai lu beaucoup de cas, et finalement je l'ai écrit comme ceci. Bien que ce soit simple après l'écriture, je rencontre des connaissances que je n'ai pas touché à chaque fois.
Allez toujours comprendre, comprendre, par exemple, ce focus input.focus (); la connaissance est toujours une petite accumulation, quand vous le faites, que vous le vouliez ou non, vous réussissez à moitié
Un novice, le manque de code peut signaler QAQ grâce