異常描述:
如下圖,輸入手機號碼之后,點擊右側的獲取驗證碼,在開發工具是OK的,真機測試無反應:
頁面編碼跟H5差不多的,H5沒出現這個問題,但是小程序就不一樣了。
異常分析:
頁面結構層面,為了方便樣式排版,手機號碼輸入框跟驗證碼輸入框是一樣寬的,獲取驗證碼的層以絕對定位的方式固定在手機號碼輸入框的右邊,如下:
對於H5來說,這個並沒有什么影響,但是小程序中,這種排版,就不行了。
光標一旦進入文本框,在沒有收起輸入鍵盤或者點擊文本框外其他地方的時候,文本框的聚焦狀態是不會改變的。
也就是說上邊這種排版種,如果輸入完手機號碼,直接去點擊獲取驗證碼,相當於直接點擊輸入框,是不會促發獲取驗證碼的單擊事件的。
那么,我們就需要進行下代碼改造了。
改造方案:
手機號碼文本框添加 padding-right 樣式,縮小文本框的輸入區域,使獲取驗證碼不在文本框的輸入區域之上就可以了,如下:
如上,即不影響原來的排版樣式,又解決了點擊獲取驗證碼無效的問題。
總結:
原來的排版方式在H5中是沒問題的,雖然文本框的輸入區域延伸到了獲取驗證碼按鈕所在的區域,但是手機號碼文本框有長度限制,所以並不會出現內容顯示杯遮蓋的問題。但是嚴格來說,最好還是設置下padding-right的,畢竟文本框的點擊輸入和獲取驗證碼的點擊事件是相互獨立且互斥的,能隔離開來就隔離開來。