ボタンをクリックした後、iOSキーボードが入力に焦点を当てる方法を教えてください。

Question

私は、検索モジュールを開発していますが、この機能で立ち往生、ロジックは次のとおりです。レンズのアイコンを

ユーザーのクリックと、これは単に入れ、正常に動作しますアンドロイドのキーボード

を示す入力に注力：

jQuery('input').focus(); 

しかし、iOSでは、これは機能しません。入力は表示されますが、フォーカスはありません。キーボードは表示されません。

Answer 1

iOSで動作させるにはtouchstartを使用します（これはAndroidでも有効です）。クリックハンドラ内で、入力のtouchstartをトリガーします。私はあなたの入力のクラスとしてmyinputと仮定します。

$('input.myinput').trigger('touchstart'); 

$('input.myinput').on('touchstart', function() { 

    $(this).focus(); 

}) 

Answer 2

ここではハックされた回避策があります。

レンズアイコンの上に入力を置きます。入力コンテナをボタンと同じ幅に設定し、不透明になるように不透明度を0に設定します。

div.input-container { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    width: 60px;  
    z-index: 1000;  
    opacity: 0; 
} 

ユーザーがボタンをクリックすると、実際に入力内をクリックすると、フォーカスがネイティブに設定されます。入力クリックイベントハンドラを追加して不透明度を1に設定し、入力幅を適切なサイズに設定します。

inputField.addEventListener('click', (event) => { 
    //use Jquery or plain JS to add a search-mode class to unhide the input 
}); 

div.input-container.search-mode {    
    width: 100%;     
    opacity: 0; 
} 

また戻ってその最初の隠された状態にある入力フィールドを取得するためにsearch-mode cssクラスを削除する方法を追加する必要があります。