iScroll5 表單元素無法失焦 解決方法
iScroll5 表單元素無法失焦 解決方法
HTML5學堂：iScroll框架從4版本升級到5版本之後，很好的解決了滾動區域中表單元素不能聚焦的問題，但是，2014年年底測試的時候發現了5版本的一個問題，如果在滾動區域當中增加了表單元素，在點選表單元素之後可以正常輸入，卻無法讓表單元素失焦。
效果圖：
程式碼解釋：在文字框當中輸入了HTML5學堂之後，再點選其他位置，當前文字框並不能失焦。
這個問題當時讓自己實在是有些頭疼。後來自己翻閱了iScroll5的文件，還是沒有找到相關的解決辦法（如果各位有查詢到解決辦法，歡迎溝通交流）。於是，就只能另闢蹊徑，解決這個問題了。第一想到的其實就是事件委託，將事件繫結在body身上，然後進行判斷點選的元素型別/元素名稱，只要不是input就讓原來的表單元素失焦（如果滾動區域中有兩個input，一個input處於聚焦狀態的時候，點選另外一個，能夠使得原來的input失焦）。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>iScroll5 表單元素無法失焦 解決方法</title> <link rel="stylesheet" href="css/reset.css"> <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" /> <script src="js/jquery-1.7.2.js"></script> <script src="js/iscroll.js"></script> <style> .box { height: 400px; overflow: hidden; border: 1px solid #f00; } .list li { height: 79px; line-height: 79px; border-bottom: 1px solid #666; font-size: 24px; font-weight: bold; } .list input { width: 240px; height: 66px; } </style> </head> <body> <div class="box" id="wrap"> <ul class="list"> <li>HTML5學堂</li> <li>移動端框架</li> <li>iScroll5</li> <li>表單元素無法失焦的解決方法</li> <li>表單元素處於滾動區域</li> <li> <form action=""> <input type="text" name="" id=""> </form> </li> <li>無法失焦</li> <li>利用事件委託解決</li> <li> <form action=""> <input type="text" name="" id=""> </form> </li> </ul> </div> </body> <script> var myScroll = new IScroll('#wrap', { mouseWheel: true, scrollbars: true, click: true }); $('body').click(function(e){ if(e.target.nodeName != "INPUT"){ $('input').blur(); }; }) </script> </html>
程式碼說明：頂部的viewport控制務必要新增上。基本功能基於了兩個框架，分別是jQuery和iScroll。
測試效果，能夠正常失焦：
程式碼解釋：上圖為在input中輸入了文字，然後點選了滾動區的任意位置，input實現失焦。
另外，在使用console.log去列印e.target的時候，很奇怪的是，input類的元素被點選進入聚焦狀態的時候，並不會觸發body元素上的點選事件，具體原因還有待研究。如果真的是不會產生點選事件的話，那麼我們可以把程式碼進行進一步的優化，將body的點選事件修改為。
$('body').click(function(){$('input').blur();})
PS：iScroll5，在小米中相當卡。另外，在小米機器上不能夠聚焦（可以嘗試採用iScroll4試試，看看是不是卡頓）
關於iScroll5的功能可以檢視文章《移動端框架 滾動類 iScroll5》