ASP.net で Web ページのログイン フォームを作成しました。
Nexus 4、標準 Android 4.2.1、ネイティブ Chrome ブラウザを使用していますが、フィールドをクリックすると、ソフト キーボードが表示され、すぐにフィールドのフォーカスが失われます。実際にテキストを入力するには、キーボードが開いている状態でフィールドをもう一度<input>クリックする必要があります。<input>
デスクトップの Chrome ではこの現象は発生しません。
ASP ユーザー コントロールに次のログイン フォームがあります。
<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, 'ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton')">
<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 が何らかの方法でフォーカスを奪っているのではないかという疑いがあります。しかし、試してみました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);
});
ベストアンサー1
これは ASP.net や ViewState とは何の関係もないことがわかりました。
Androidキーボードが表示されたら、ブラウザウィンドウのサイズが変更されました- トリガーサイズ変更イベント。
私は次のようなものを実行していました:
// Move the navigation on resize
$(window).bind('resize', function() {
if(maxWidth <= 710px) {
$('.nav').after($('.main-content'));
}
});
これにより、DOM 内のナビゲーションが移動しました。これにより DOM が再描画され、DOM 内のすべてがフォーカスを失うことになると思います。サイズ変更時にこれが発生しないようにし、代わりに最初のページ読み込み時にのみ発生するようにしました。