前回のキーボードUIインターフェースによると、以下のようにキーボードに入力効果を持たせるために入力ボックスを追加しました
インターフェースコードは前の記事に移動できます：https://www.cnblogs.com/2979100039-qq-con/p/12641603.html
このコードに入力ボックスが追加され、キーボードを0.7倍に拡大縮小できます
次のポイントは、jsコードもjqueryを使用してjqフレームワークに書き込むことです
jqueryコードは非常に単純です。クリックイベントがいくつかあり、入力ボックスの値を変更して効果を入力します。
$（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"）。オン（ "クリック"、function（）{
var input = $（this）;
$（ "。f_div"）。show（）;
/ *入力できないボタンを除外するボタンインデックスを取得* /
var jpnub = $（ "＃s_div button"）。length;
$（ "＃s_div button"）。unbind（ 「クリック」）;
var xfkb_text = input.val（）; //入力ボックスの現在のval値を取得
$（ "＃s_div button"）。click（function（）{
var click = $（this）.html（）;
var butindex = $（ this）.index（）; //クリックされたキーのコンテンツを取得
//ここに特別なキー追加イベント
//クリックされたキーに特別なイベントがあるかどうかを判断し、ない場合は、キーのコンテンツが入力テキストの後に追加されます
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（）;
}そうしないと {
xfkb_text = xfkb_text +クリック;
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のおかげで指摘できます