微信小程序開發——文本框種輸入手機號，點擊獲取驗證碼無反應的處理方法

異常描述：

以下圖，輸入手機號碼以後，點擊右側的獲取驗證碼，在開發工具是OK的，真機測試無反應：

頁面編碼跟H5差很少的，H5沒出現這個問題，可是小程序就不同了。

異常分析：

頁面結構層面，爲了方便樣式排版，手機號碼輸入框跟驗證碼輸入框是同樣寬的，獲取驗證碼的層以絕對定位的方式固定在手機號碼輸入框的右邊，以下：

對於H5來講，這個並無什麼影響，可是小程序中，這種排版，就不行了。

光標一旦進入文本框，在沒有收起輸入鍵盤或者點擊文本框外其餘地方的時候，文本框的聚焦狀態是不會改變的。

也就是說上邊這種排版種，若是輸入完手機號碼，直接去點擊獲取驗證碼，至關於直接點擊輸入框，是不會促發獲取驗證碼的單擊事件的。

那麼，咱們就須要進行下代碼改造了。

改造方案：

手機號碼文本框添加 padding-right 樣式，縮小文本框的輸入區域，使獲取驗證碼不在文本框的輸入區域之上就能夠了，以下：

如上，即不影響原來的排版樣式，又解決了點擊獲取驗證碼無效的問題。

總結：

原來的排版方式在H5中是沒問題的，雖然文本框的輸入區域延伸到了獲取驗證碼按鈕所在的區域，可是手機號碼文本框有長度限制，因此並不會出現內容顯示杯遮蓋的問題。可是嚴格來講，最好仍是設置下padding-right的，畢竟文本框的點擊輸入和獲取驗證碼的點擊事件是相互獨立且互斥的，能隔離開來就隔離開來。