使用iScroll時，input等不能輸入內容的解決方法

wawor4827 發布于2019-08-20 14:44 / 2231人閱讀

摘要：發現當使用后，等不能輸入內容了。這是由于要監聽鼠標事件和觸摸事件來進行滾動，所以禁止了瀏覽器的默認行為。不分青紅皂白，禁止了瀏覽器的一切默認行為，導致上述問題。

做移動平臺的應用，使用iscroll使屏幕上下滑動。發現當使用iscroll后，input等不能輸入內容了。只要在iscroll.js文件中加入如下代碼就ok了。

function allowFormsInIscroll(){
 [].slice.call(document.querySelectorAll("input, select, button")).forEach(function(el){
 el.addEventListener(("ontouchstart" in window)?"touchstart":"mousedown", function(e){
 e.stopPropagation();
  
 })
 })
 }
 document.addEventListener("DOMContentLoaded", allowFormsInIscroll, false);

問題原因是：iscroll需要一直監聽用戶的touch操作，以便靈敏的做出對應效果，所以它把其余的默認事件屏蔽了。

以上代碼原理是：頁面加載完成后查找到所有的"input, select, button"元素并依次綁定"touchstart"或"mousedown"事件，在執行事件的時候停止事件的傳播，這樣行了。

使用了iscroll之后，你會發現點擊輸入框時不靈敏，經常無法聚焦；頁面文字也無法選擇和復制。這是由于iscroll要監聽鼠標事件和觸摸事件來進行滾動，所以禁止了瀏覽器的默認行為。
iscroll不分青紅皂白，禁止了瀏覽器的一切默認行為，導致上述問題。所以我們需要稍作修改：

onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)
e.preventDefault();
},

云服務器 GPU云服務器 gta5云服務器不能使用方法 input輸入值的解決方法 js獲取input輸入數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81876.html

使用iscroll4可能會遇到的問題(轉：記錄)

摘要：只針對，因為的暫時還不支持，會自動選擇不用。原因還是和問題一樣的，因為屏蔽了默認事件。在技術上解決不了的問題，我認為還是多和產品和溝通比較好，共同協商一個良好的方案。 1.在iscroll4的滾動容器范圍內，點擊input框、select等表單元素時沒有響應這個問題原因在于iscroll需要一直監聽用戶的touch操作，以便靈敏的做出對應效果，所以它把其余的默認事件屏蔽了，解決的方法是...

keelii 2019-08-20 17:06 評論0 收藏0
使用iscroll4可能會遇到的問題(轉：記錄)

摘要：只針對，因為的暫時還不支持，會自動選擇不用。原因還是和問題一樣的，因為屏蔽了默認事件。在技術上解決不了的問題，我認為還是多和產品和溝通比較好，共同協商一個良好的方案。 1.在iscroll4的滾動容器范圍內，點擊input框、select等表單元素時沒有響應這個問題原因在于iscroll需要一直監聽用戶的touch操作，以便靈敏的做出對應效果，所以它把其余的默認事件屏蔽了，解決的方法是...

褰辯話 2019-08-29 12:43 評論0 收藏0
如何用 js 獲取虛擬鍵盤高度？（適用所有平臺）

摘要：前言這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題瀏覽器偏偏沒有給出解決方案，沒有方案還聊個什么別急，別急，接下來我們一起來扒一扒關于軟鍵盤高度和的問題我們先來看一個短片認識一下這個問題問題描述當操作者進行輸入操作的時候，彈起的前言這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題瀏覽器偏偏沒有給出解決方案，what？沒有方案還聊個什么？別急，別急，接下來我們...

terro 2019-08-22 10:54 評論0 收藏0
如何用 js 獲取虛擬鍵盤高度？（適用所有平臺）

摘要：前言這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題瀏覽器偏偏沒有給出解決方案，沒有方案還聊個什么別急，別急，接下來我們一起來扒一扒關于軟鍵盤高度和的問題我們先來看一個短片認識一下這個問題問題描述當操作者進行輸入操作的時候，彈起的前言這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題瀏覽器偏偏沒有給出解決方案，what？沒有方案還聊個什么？別急，別急，接下來我們...

Forest10 2019-08-01 17:26 評論0 收藏0