最近要做一個移動前端, 填字的需求, 類似pc上一些程序填寫序列號的界面,
填寫前: h w o r l d
填寫后: h e l l o w o r l d,
界面大概如上圖, 在下划線的位置填寫對應的序列號, 但是必須保證輸入體驗的的連續性。
填寫字符, 下划線好辦, 最開始的思路直接用input來做填寫框, css 如下:
.my-input{
width: 12px;
margin-right: 1px;
outline: none;
border: none;
border-bottom: 1px solid black;
font-size: 10pt;
font-weight: bolder;
text-align: center;
color: #818181;
}
消去input 的瀏覽器默認樣式以后, 利用border來模擬出下划線。然后每個小字符的輸入框用一個Input來實現, 多個input來實現出需要的ui樣式。
然后利用js, keydown事件, 每當用戶輸入一個字符, 識別keyCode對當前input中的值進行過濾, 就focus到下一個input當中。PC端實現以后運行完美。 然后就是悲劇的開始。
上到移動端以后出現各種問題。
1. 微信瀏覽器中, 在九宮格鍵盤輸入時, keydown, keyup事件中無法獲取到keyCode, which(全部是0)。可以換在input事件中進行input value的重置, 不過這樣字符會閃動, 回調是在輸入生效以后才發生的, 會看到字符閃動的現象。
2. 在iphone的微信中, 不經過用戶的點擊, 在keydown, keyup中用js, 調用focus讓input獲取焦點, 會導致無法彈出軟鍵盤, 原本打開的軟鍵盤也會關閉。
這個坑就比較大了, 試過模擬一個click事件發現還是沒用, 暫時沒找到好的方法。
好消息是PM讓不用管微信, PC上能運行OK就可以。