ソフトキーボードが開くと、Android - html入力がフォーカスを失う（ASP.net）

Question

ASP.netでWebページログインフォームを作成しました。

Nexus 4を使用して、Android 4.2.1のネイティブChromeブラウザを使用しています。<input>フィールドをクリックすると、ソフトキーボードが表示され、すぐにフォーカスが失われます。 <input>フィールドをもう一度クリックして、キーボードを開いて実際にテキストを入力する必要があります。

これはデスクトップのChromeでは発生しません。

<asp:Login ID="login_form" runat="server" OnLoginError="OnFail" OnLoggedIn="OnLoggedIn" RenderOuterTable="false" RememberMeSet="True"> 
    <LayoutTemplate> 

     <asp:Panel runat="server" DefaultButton="LoginButton" CssClass="members-login"> 
      <fieldset> 
       <label for="UserName">Username</label> 
       <asp:TextBox ID="username" placeholder="e.g. joebloggs12" runat="server"></asp:TextBox> 

       <label for="Password">Password</label> 
       <asp:TextBox ID="password" runat="server" placeholder="e.g. 1234" TextMode="Password"></asp:TextBox> 

       <label id="RememberMe">Remember me</label> 
       <asp:CheckBox ID="RememberMe" runat="server" /> 

       <asp:Button CssClass="button" ID="LoginButton" runat="server" CommandName="Login" Text="SUBMIT" /> 
      </fieldset> 
     </asp:Panel>   
    </LayoutTemplate> 
</asp:Login> 

このようなブラウザに表示されます：

<div class="members-login" onkeypress="javascript:return WebForm_FireDefaultButton(event, &#39;ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton&#39;)"> 

    <fieldset> 
     <label for="UserName">Username</label> 
     <input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$username" type="text" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_username" placeholder="e.g. joebloggs12" /> 

     <label for="Password">Password</label> 
     <input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$password" type="password" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_password" placeholder="e.g. 1234" /> 

     <label id="RememberMe">Remember me</label> 
     <input id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_RememberMe" type="checkbox" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$RememberMe" checked="checked" /> 

     <input type="submit" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$LoginButton" value="SUBMIT" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton" class="button" /> 
    </fieldset> 
</div> 

私の疑惑は、ViewStateが何とかフォーカスを盗むことです

私はASPユーザーコントロールで、次のログインフォームを持っています。しかし、私は助けてくれなかったevent.stopPropogation()を試しました。

---

一時的な修正

今の私は、クリック後に戻っ<input>要素700ミリ秒の上に焦点を当てて強制的に、ハックの修正のために定住しました：

jQuery('input').bind('click',function(evt) { 
    var focusClosure = (function(inputElem) {return function() {console.log(inputElem.focus());}}($(evt.target))); 
    window.setTimeout(focusClosure, 700); 
}); 

Answer 1

私はこれが発見されましたASP.netやViewStateとは関係ありません。

Androidのキーボードが表示されたら、ブラウザウィンドウがをリサイズされる - resizeイベントをトリガします。

私は、次のような何かを実行していた。

// Move the navigation on resize 
$(window).bind('resize', function() { 
    if(maxWidth <= 710px) { 
     $('.nav').after($('.main-content')); 
    } 
}); 

これはDOMのナビゲーションを動かしました。私はこれがDOMを再描画するので、DOM内の何かにフォーカスが失われると思います。サイズ変更時にこれをやめてしまいました。最初のページの読み込み時にしか発生しませんでした。

Answer 2

あなたはこれが私の作品

$('input').click(function(){ 
    getFocus(this); 
}); 

関数を呼び出す入力してクリックしたときに、私は他のソリューションに

ファーストを見つけてきたあなたは

function getFocus(campo){ 
    $(window).bind('resize', function() { 
     if(windowWidth <= 1025) { 
      $(campo).focus(); 
     } 
    }); 

} 

機能を作成する必要がありますと

Answer 3

私は同様の問題を抱えていました。フォーカスで問題を解決している。

$(window).bind('resize', function() { 
    if ($("input").is(":focus")) { 
     // input is in focus, don't do nothing or input loses focus and keyboard dissapears 
    } else { 
     // do whatever you should do if resize happens 
    } 
}); 

Answer 4

は、私はこの問題を自分で持って、このソリューションを使用して終了してきた

のjQueryが必要です。他の人にとっては役に立つかもしれません。私の場合は、サイズ変更によって検索バーがフォーカスを失うようになりました。

// Makes it so that click events are fired on a mobile device. 
$('#searchbar').each(function(){ 
    this.onclick = function() {} 
}); 

// Runs an interval 10 times with a 50ms delay. Forces focus. 
$("#searchbar").click(function() { 
    var i = 0; 
    var interval = window.setInterval(function(){ 
     if(i > 10) { 
      clearInterval(interval); 
     } 
     $("#searchbar").focus(); 
     i++; 
    }, 50); 
}); 

Answer 5

WordPressでこの問題が発生した場合は、ヘッダーに次のコードを挿入します。私が見つけた

<script type="text/javascript"> 
jQuery(function($) { 
$(window).bind('resize', function() { 
if ($("input").is(":focus")) { 
var focusClosure = (function(inputElem) {return function() 
{console.log(inputElem.focus());}}($(evt.target))); 
window.setTimeout(focusClosure, 700); 
} else { 
    // Other resize functions 
} 
}); 
}); 
</script>