當您填寫表單時，如果點擊下一步，您如何控制iOS/Android將關注哪個字段？

這種情況是，我有一個多步驟的過程，我一次只顯示一個模式，但不是每一步都有一個表單域。當您填寫表單時，如果點擊下一步，您如何控制iOS/Android將關注哪個字段？

所以當我準備好從Step 1（它有一個表單域）並且點擊鍵盤工具欄中的下一個幫助圖標（iOS的一個函數）時，它會將我轉到Step 4中的不可用/半透明字段。

第一步：詢問年齡
步驟2：選擇性別的（這些是李元素）
第3步：選擇利益（這些也都是李元素）
第4步：輸入一個名稱

我試過tabIndex，但沒有任何影響。

我不確定這甚至是可能的，因爲這實際上是一個iOS控件。如果這是不可能的，你可以隱藏它嗎？

不希望的解決將是做一次檢查，當用戶集中在Step 4字段，並且如果在Step 3和Step 4的元素還沒有被選擇集中於適用前一步驟的用戶。

2015-03-08 creativetim

據我所知，它是一個html結構的順序。所以，如果你想改變順序，改變HTML。如果你不能或者你不能通過修改html文件來避免這個問題，比如複雜的html結構導致問題或者其他原因。下面的代碼是如何禁用IOS鍵盤的<prev><next>按鈕。

HTML

<input type="text" /> 
<input type="number" /> 
<input type="date" /> 
<input type="time" /> 
<input type="tel" />

的JavaScript（jQuery的）

$("input").on("touchstart",function(e){ 
    _$activeElem = $(this); 
    //readonly disables next/prev buttons. so when user tap input field,turns any other input into readonly 
    //You cannot use focus here because keyboard shows up before focus fired,you need to use touchstart instead. 
    $("input").each(function(){ 
    if($(this).get(0) === _$activeElem.get(0)){ 
     _$activeElem.removeAttr("readonly"); 
     $(this).one("blur",function(){ 
     $(this).attr("readonly","readonly"); 
     }); 
     return; 
    }else{ 
     $(this).attr("readonly","readonly"); 
    } 
    }); 
    //remove readonly property on blur 
    $("input").on("blur",function(){ 
    if($("input:not([readonly])").length === -1){ 
     $("input").removeAttr("readonly"); 
    } 
    }); 
});

，使readonly輸入看起來像普通的輸入字段通過CSS。

來源

2015-03-09 00:32:39 suish

當您填寫表單時，如果點擊下一步，您如何控制iOS/Android將關注哪個字段？

回答

相關問題