De acuerdo con la interfaz de usuario del teclado del artículo anterior, agregué un cuadro de entrada para que el teclado tenga el efecto de entrada de la siguiente manera
El código de la interfaz puede ir al artículo anterior: https://www.cnblogs.com/2979100039-qq-con/p/12641603.html
Se agrega un cuadro de entrada a este código, y el teclado se puede escalar 0.7 veces
El siguiente punto es que el código js también usa jquery para escribir en el marco jq
El código jquery es muy simple, solo algunos eventos de clic y pueden cambiar el valor del cuadro de entrada para ingresar el efecto
$ (function () {
/ * Haga clic en el teclado para asignar * /
function chagekey (btn) {
var inp_value = $ ("# inp"). val ();
var t = btn.html ();
var map = inp_value + t;
$ ("# inp"). attr ("value", map);
}
/ * Método de movimiento del teclado * /
$ (". 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");
}) ;
/ * Aparece el teclado con el cuadro de entrada seleccionado * /
$ ("# inp"). Activado ("clic",function () {
var input = $ (this);
$ (". f_div"). show ();
/ * Obtener el índice del botón para excluir los botones que no se pueden ingresar * /
var jpnub = $ ("# botón s_div"). length;
$ ("# botón # s_div"). desvincular ( "clic");
var xfkb_text = input.val (); // Obtiene el valor val actual del cuadro de entrada
$ ("# botón s_div"). click (function () {
var click = $ (this) .html ();
var butindex = $ ( this) .index (); // Obtenga el contenido de la clave clicada //
Evento de agregar clave especial aquí
// Juzgue si la clave clicada tiene un evento especial, si no, el contenido de la clave se agrega después del texto de entrada
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 ();
} más {
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 ());
});
}
});
});
});
Continuaré optimizando este teclado más tarde, cuando aprendí algo para optimizar
Cuando escribí esto, leí muchos casos y finalmente lo escribí así. Aunque es simple después de escribir, encuentro algunos conocimientos que no he tocado siempre.
Siempre ve a entender, a descubrir, por ejemplo, este enfoque input.focus (); el conocimiento siempre es una pequeña acumulación, cuando lo haces, lo hagas o no, tienes medio éxito
Un novato, la falta de código puede señalar QAQ gracias