首頁 > web前端 > js教程 > 主體

JavaScript仿支付寶密碼輸入框_javascript技巧

不言
發布: 2018-05-18 14:56:08
原創
2651 人瀏覽過

現在很多時候大家付款的場景都是在手機上面,而隨著H5頁面的開發變得越來越方便,很多場景也從客戶端搬到了瀏覽器中,其中支付這個場景就很自然的被放在了瀏覽器中。那麼這樣的輸入框大家一定不會陌生吧:

那麼今天我就用JavaScript程式碼來實現這個效果吧,那麼先介紹一下整個的思路,首先我們先將確定輸入密碼的位數,我的需求是5位,那麼就用一個p標籤包住5個input標籤。

並且給這個5個input設定display: inline-block 屬性,同時用來消除元素直接的margin值,那麼HTML就是如下的樣子:

<p class="input"> 
<input type="tel" placeholder="随" maxlength=""><!- 
-><input type="tel" placeholder="机" maxlength=""><!- 
-><input type="tel" placeholder="" maxlength=""><!- 
-><input type="tel" placeholder="位" maxlength=""><!- 
-><input type="tel" placeholder="数" maxlength=""> 
</p>
登入後複製

在程式碼中我們需要設定最多輸入的位數,不然就不像了嘛~當然為了在行動端輸入的時候能喚起數字鍵盤來,我們也需要設定type="tel"。那接下來就是CSS樣式的程式碼了,這裡我就簡單的貼出一些程式碼,具體高仿的像不像其實就是這裡了~

input { 
display: inline-block; 
&:last-child { 
border-right: px solid #; 
} 
input { 
border-top: px solid #; 
border-bottom: px solid #; 
border-left: px solid #; 
width: px; 
height: px; 
outline:none; 
font-family: inherit; 
font-size: px; 
font-weight: inherit; 
text-align: center; 
line-height: px; 
color: #ccc; 
background: rgba(,,,); 
} 
}
登入後複製

那麼接下來就是最關鍵的JavaScript部分了,

/** 
* 模拟支付宝的密码输入形式 
*/ 
(function (window, document) { 
var active = , 
inputBtn = document.querySelectorAll(&#39;input&#39;); 
for (var i = ; i < inputBtn.length; i++) { 
inputBtn[i].addEventListener(&#39;click&#39;, function () { 
inputBtn[active].focus(); 
}, false); 
inputBtn[i].addEventListener(&#39;focus&#39;, function () { 
this.addEventListener(&#39;keyup&#39;, listenKeyUp, false); 
}, false); 
inputBtn[i].addEventListener(&#39;blur&#39;, function () { 
this.removeEventListener(&#39;keyup&#39;, listenKeyUp, false); 
}, false); 
} 
/** 
* 监听键盘的敲击事件 
*/ 
function listenKeyUp() { 
var beginBtn = document.querySelector(&#39;#beginBtn&#39;); 
if (!isNaN(this.value) && this.value.length != ) { 
if (active < ) { 
active += ; 
} 
inputBtn[active].focus(); 
} else if (this.value.length == ) { 
if (active > ) { 
active -= ; 
} 
inputBtn[active].focus(); 
} 
if (active >= ) { 
var _value = inputBtn[active].value; 
if (beginBtn.className == &#39;begin-no&#39; && !isNaN(_value) && _value.length != ) { 
beginBtn.className = &#39;begin&#39;; 
beginBtn.addEventListener(&#39;click&#39;, function () { 
calculate.begin(); 
}, false); 
} 
} else { 
if (beginBtn.className == &#39;begin&#39;) { 
beginBtn.className = &#39;begin-no&#39;; 
} 
} 
} 
})(window, document);
登入後複製

首先我們對最外層的p進行監聽,當發現用戶選擇p的時候就將input的焦點設置到active上面去,而這個active則是一個計數器,默認的時候是第一位的,也就是0,而當我們輸入了正確的數字後將會增加一個active,這樣input的焦點就會向後移動了,這樣就完成了輸入一個向後移動一位的功能了,而同時我們監聽鍵盤上的退格鍵,當用戶點擊了退格鍵之後就對active減一,這樣輸入框的焦點也就向前移動了,當然,當input失去焦點的時候我們也同時移除綁定在上面的監聽事件,這樣就不會造成多次觸發的問題了。

其實這樣梳理下來會發現整個效果還是很簡單的,只需要控制好一個焦點的移動就好了,而我覺得整個組件的重點還是在CSS樣式的模仿上面~畢竟JavaScript的邏輯沒有什麼難的~最後祝大家元旦快樂啦~(*^__^*) ~~

以上程式碼給大家簡單介紹了JavaScript仿支付寶密碼輸入框的全部敘述,希望大家喜歡。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!