Vue Components-デジタルキーボード
3118 ワード
プロジェクトの住所はクリックして見ます.
プロジェクトのプレゼンテーションをクリックして表示します.は、まずすべてのinputを傍受し、inputフォーカス時にデジタルキーボードを調整し、 を隠す.小キーボードをクリックすると、デフォルトイベントを阻止し、inputがフォーカスを失うのを阻止する. はキーパッドをクリックすると、イベント依頼により、クリックした数字を導出し、 削除キーをクリックすると、カーソルの数字を削除し、最後にカーソルを右に移動します. は、数字を削除し、数字を追加した後に、inputに焦点を合わせて焦点を失うようにします.そうでなければ、カーソルは最後にinputの視認領域ではなく、このように入力の値が見えなくなります.具体的に項目を見ることができます.
プロジェクトのプレゼンテーションをクリックして表示します.
getBoundingClientRect
を通じてinput位置を判断し、inputの近くにデジタルキーボードを配置し、ピントを失ったら、隠しテンキーlet inputElement = document.getElementsByTagName("input");
[...inputElement].forEach(ipele => {
ipele.addEventListener("focus", function(e) {
$this.inputTarget = e.target;
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
let scrollLeft =
window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft;
$this.NumberkeyBoardStyle =
"top:" +
(e.target.getBoundingClientRect().top +
scrollTop +
e.target.offsetHeight) +
"px;left:" +
(e.target.getBoundingClientRect().left +
scrollLeft +
e.target.offsetWidth) +
"px";
});
ipele.addEventListener("blur", function(e) {
$this.inputTarget = null;
$this.NumberkeyBoardStyle = "display:none";
});
});
BoardNumberKeyDown(e) {
if (e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
return false;
}
},
selectionStart
に従ってinputの焦点を取得し、キーパッドの数字をピントに挿入し、最後の焦点を右に移動する.let inputTarget = this.inputTarget;
let Pointstart = inputTarget.selectionStart;
let PointEnd = inputTarget.selectionEnd;
let wordLength = inputTarget.value.length;
if (e.target.className == "numberTD" && e.target.innerText != "←") {
inputTarget.value =
inputTarget.value.slice(0, Pointstart) +
e.target.innerText +
inputTarget.value.slice(PointEnd, wordLength);
//
inputTarget.value = inputTarget.value.replace(/^\./g, "");
inputTarget.value = inputTarget.value
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".");
inputTarget.selectionStart = Pointstart + 1;
inputTarget.selectionEnd = Pointstart + 1;
// input
inputTarget.blur();
inputTarget.focus();
if (e.target.className == "numberTD" &&
e.target.innerText == "←" &&
//PointEnd==0 input value
PointEnd != 0
) {
inputTarget.value =
inputTarget.value.slice(0, Pointstart - 1) +
inputTarget.value.slice(PointEnd, wordLength);
inputTarget.selectionStart = Pointstart - 1;
inputTarget.selectionEnd = Pointstart - 1;
// input
inputTarget.blur();
inputTarget.focus();
}