Vue Components 數(shù)字鍵盤的實現(xiàn)
本文介紹了Vue Components 數(shù)字鍵盤的實現(xiàn),分享給大家,具體如下:
項目地址 點擊查看
項目演示 點擊查看
首先監(jiān)聽所有的input,有input聚焦時調起數(shù)字鍵盤,通過getBoundingClientRect判斷input位置讓數(shù)字鍵盤在input附近,失去焦點后則隱藏數(shù)字鍵盤
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";
});
});
點擊小鍵盤時阻止默認事件,阻止input失去焦點。
BoardNumberKeyDown(e) {
if (e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
return false;
}
},
點擊小鍵盤時,根據(jù)事件委托,得出點擊的數(shù)字,然后根據(jù)selectionStart,selectionEnd獲取input中的焦點,將小鍵盤中的數(shù)字插入焦點處,最后焦點右移一位。
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);
//一個小數(shù)點和開頭不能有小數(shù)點
inputTarget.value = inputTarget.value.replace(/^\./g, "");
inputTarget.value = inputTarget.value
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".");
inputTarget.selectionStart = Pointstart + 1;
inputTarget.selectionEnd = Pointstart + 1;
//讓光標顯示在input可視區(qū)域
inputTarget.blur();
inputTarget.focus();
點擊刪除鍵時,刪除光標處數(shù)字,最后光標右移。
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可視區(qū)域
inputTarget.blur();
inputTarget.focus();
}
在刪除數(shù)字和添加數(shù)字后要讓input失去焦點在獲取焦點,不然光標會在最后而不是在input的可視區(qū)域,這樣子會看不到輸入的值,具體可以查看項目。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Ant?Design_Form表單上傳文件組件實現(xiàn)詳解
這篇文章主要為大家介紹了Ant?Design_Form表單上傳文件組件實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03
從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現(xiàn)按需加載
這篇文章主要介紹了從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現(xiàn)按需加載,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
解決vue項目Error:Cannot find module‘xxx’類報錯問題
當npm運行報錯Error:Cannot find module 'xxx'時,通常是因為node_modules文件或依賴未正確安裝,解決步驟包括刪除node_modules和package-lock.json文件,重新運行npm install,并根據(jù)需要安裝額外插件,若網(wǎng)絡問題導致安裝失敗2024-10-10
vue-cli 自定義指令directive 添加驗證滑塊示例
本篇文章主要介紹了vue-cli 自定義指令directive 添加驗證滑塊示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10
vue3自定義組件之v-model實現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實現(xiàn)父子組件雙向綁定方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
解決vue組件沒顯示,沒起作用,沒報錯,但該顯示的組件沒顯示問題
這篇文章主要介紹了解決vue組件沒顯示,沒起作用,沒報錯,但該顯示的組件沒顯示問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解elementui之el-image-viewer(圖片查看器)
這篇文章主要介紹了詳解elementui之el-image-viewer(圖片查看器),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
vue中watch和computed的區(qū)別與使用方法
這篇文章主要給大家介紹了關于vue中watch和computed的區(qū)別與使用方法的相關資料,文中通過實例代碼結束的非常詳細,對大家學習或者使用Vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2020-08-08

