1. 程式人生 > >解決IOS在網頁搖一搖會出現撤銷彈出框的一種方案帶音效的哈

解決IOS在網頁搖一搖會出現撤銷彈出框的一種方案帶音效的哈

問題:IOS在網頁中如果包含輸入框,比如輸入兌換碼正確後可以進行搖一搖,但是因為之前在輸入框中輸入過兌換碼,由於iphone有個很強大的功能就是搖一搖撤銷,這個功能可以在設定--通用--輔助功能--搖動以撤銷中關閉,但是不能讓每個使用者都在使用你的功能時去關閉,這樣體驗也太差了。直接上解決方案

 一、網上有的說可以分開頁面去做,就是兌換碼框是一個頁面,輸入正確後跳轉到搖一搖頁面,這個是可以解決搖一搖撤銷的問題,但是我們的搖一搖呢需要在搖動的時候播放搖一搖強大的聲音效果,並且還要有搖中的聲音,IOS系統在safari中預設是不讓開啟音效的,還得讓使用者自己去開啟,這下這個方案就不適合我了,不過適合不需要音效滴同學。

二、這種方案是我用的。在搖一搖頁面彈出層,輸入兌換碼或則驗證碼也好,使用者點選確定事件時自動觸發先播放背景音樂,搖一搖時切換音樂路徑,搖中時切換搖中的音樂路徑,完美解決我的需求。不過此時就出現了搖一搖撤銷彈出框的問題啦,經過測試當用戶點選了IOS系統中鍵盤右上角的完成按鈕時再搖一搖就不會出現撤銷彈出框啦,但是完成按鈕的事件又監聽不到,不過經過測試發現點選完成按鈕時輸入框會失去焦點,點選其他按鈕不會失去焦點,這是就檢測輸入框的blur事件就可以啦,但是必須引導使用者去點選完成按鈕,(所以流程就是,提示使用者點選完成按鈕,此時會獲取輸入框的blur事件,此blur事件中觸發提交或者處理自己的業務,我這裡是觸發背景音樂播放以及提交驗證兌換碼正確性),至此偉大的搖一搖功能就可以啦。

原始碼還沒有來得及搞出來,其實也不難,就是方案的問題。大家有什麼問題可以留言,希望可以幫到需要的朋友