Android的 - HTML输入丢失时，软键盘打开对焦（ASP.net） [英] Android - html input loses focus when soft keyboard opens (ASP.net)
问题描述
我在ASP.net写了网页登录表单。
使用的Nexus 4，股票的Android 4.2.1，本机的Chrome浏览器 - 当我点击＆LT;输入＆GT; 字段，将出现软键盘，然后领域马上失去焦点。我必须点击＆LT;输入＆GT; 现场再次用键盘已经打开实际输入的文本
这不会发生在Chrome浏览器在桌面上。
我有一个ASP用户控制在以下登录表单：
＆LT; ASP：登录ID =login_form=服务器OnLoginError =OnFailOnLoggedIn =OnLoggedInRenderOuterTable =假RememberMeSet =真＆GT;
＆LT; LayoutTemplate模板＆GT;
＆LT; ASP：面板=服务器的defaultButton =LoginButton的CssClass =会员登入＆GT;
＆LT;字段集＆GT;
＆LT;标签=用户名和GT;用户名和LT; /标签＆gt;
＆LT; ASP：文本框ID =用户名占位符=如joebloggs12=服务器＆GT;＆LT; / ASP：文本框＆GT;
＆LT;标签=密码＆GT;密码＆LT; /标签＆gt;
＆LT; ASP：文本框的ID =密码=服务器占位符=例如，1234文本模式=密码＆GT;＆LT; / ASP：文本框＆GT;
＆LT;标签ID =了rememberMe＆GT;记住我＆LT; /标签＆gt;
＆LT; ASP：复选框ID =了rememberMe=服务器/＆GT;
＆LT; ASP：按钮的CssClass =按钮ID =LoginButton=服务器的CommandName =登录文本=提交/＆GT;
＆LT; /字段集＆GT;
＆LT; / ASP：面板＆gt;
＆LT; / LayoutTemplate模板＆GT;
＆LT; / ASP：登录＆GT;
这似乎是这样的浏览器：
＆LT; DIV CLASS =会员登入onkey preSS =JavaScript的：返回WebForm_FireDefaultButton（事件，及放大器;＃39; ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton和放大器;＃39;）＆GT;
＆LT;字段集＆GT;
＆LT;标签=用户名和GT;用户名和LT; /标签＆gt;
＆LT;输入名称=ctl00 $ ctl00 $ ctl00 $ ContentPlaceHolderDefault $ contentBody $ masterContent $ login_form $用户名类型=文本ID =ContentPlaceHolderDefault_contentBody_masterContent_login_form_username占位符=如joebloggs12/＆GT;
＆LT;标签=密码＆GT;密码＆LT; /标签＆gt;
＆LT;输入名称=ctl00 $ ctl00 $ ctl00 $ ContentPlaceHolderDefault $ contentBody $ masterContent $ login_form $密码类型=密码ID =ContentPlaceHolderDefault_contentBody_masterContent_login_form_password占位符=例如，1234/＆GT;
＆LT;标签ID =了rememberMe＆GT;记住我＆LT; /标签＆gt;
＆LT;输入ID =ContentPlaceHolderDefault_contentBody_masterContent_login_form_RememberMe类型=复选框名称=ctl00 $ ctl00 $ ctl00 $ ContentPlaceHolderDefault $ contentBody $ masterContent $ login_form $了rememberMe检查=检查/＆GT;
＆LT;输入类型=提交名称=ctl00 $ ctl00 $ ctl00 $ ContentPlaceHolderDefault $ contentBody $ masterContent $ login_form $ LoginButtonVALUE =提交ID =ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton级=按钮/＆GT;
＆LT; /字段集＆GT;
＆LT; / DIV＆GT;
我怀疑是ViewState的是某种偷焦点。但我试过 event.stopPropogation（）这并没有帮助。
临时的解决办法
现在我已经解决了哈克修复，迫使焦点放回＆LT;输入＆GT; 元素后，点击700毫秒：
的jQuery（输入）。绑定（点击，功能（EVT）{
VAR focusClosure =（函数（inputElem）{返回函数（）{执行console.log（inputElem.focus（））;}}（$（evt.target）））;
window.setTimeout（focusClosure，700）;
}）;
我发现这是无关的ASP.net或ViewState中或Android。
在Android键盘出现，在浏览器窗口大小 - 触发调整大小事件
我跑类似于以下内容：
//将在调整大小导航
$（窗口）.bind（调整大小，函数（）{
如果（与了maxWidth LT = 710px）{
$（'导航'）后（$（'主要内容。'））;
}
}）;
这移动在DOM中导航。我想这重绘DOM等引起任何的DOM失去焦点。我从发生在调整大小时停止此 - 使得它只能发生在初始页面加载，而不是
I've written a web-page login form in ASP.net.
Using a Nexus 4, stock Android 4.2.1, native Chrome browser - when I click on the <input> fields, the soft keyboard appears and then the field immediately loses focus. I have to click the <input> field again with the keyboard already open to actually enter text.
This doesn't happen in Chrome on a desktop.
I have the following login form in an ASP user control:
<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>
which appears to the browser like this:
<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>
My suspicion is that the ViewState is stealing focus somehow. But I tried event.stopPropogation() which didn't help.
Temporary fix
For now I've settled for a hacky fix, forcing focus back onto the <input> element 700 milliseconds after a click:
jQuery('input').bind('click',function(evt) {
var focusClosure = (function(inputElem) {return function() {console.log(inputElem.focus());}}($(evt.target)));
window.setTimeout(focusClosure, 700);
});
I discovered this is nothing to do with ASP.net or ViewState or Android.
When the Android keyboard appears, the browser window is resized - triggering the resize event.
I was running something similar to the following:
// Move the navigation on resize
$(window).bind('resize', function() {
if(maxWidth <= 710px) {
$('.nav').after($('.main-content'));
}
});
This moved the navigation in the DOM. I guess this redraws the DOM and so causes anything in the DOM to lose focus. I stopped this from happening on resize - making it only happen on initial page load instead.
这篇关于Android的 - HTML输入丢失时，软键盘打开对焦（ASP.net）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
