Android - 当软键盘打开时 html 输入失去焦点 (ASP.net) [英] Android - html input loses focus when soft keyboard opens (ASP.net)
问题描述
我在 ASP.net 中编写了一个网页登录表单.
使用 Nexus 4、Android 4.2.1、原生 Chrome 浏览器 - 当我点击 <input>
字段时,软键盘出现,然后该字段立即失去焦点.我必须在键盘已经打开的情况下再次单击 字段才能实际输入文本.
这在桌面版 Chrome 中不会发生.
我在 ASP 用户控件中有以下登录表单:
<asp:Login ID="login_form" runat="server" OnLoginError="OnFail" OnLoggedIn="OnLoggedIn" RenderOuterTable="false" RememberMeSet="True"><布局模板><asp:Panel runat="server" DefaultButton="LoginButton" CssClass="members-login"><字段集><label for="UserName">用户名</label><asp:TextBox ID="username" placeholder="e.g. joebloggs12" runat="server"></asp:TextBox><label for="密码">密码</label><asp:TextBox ID="password" runat="server" placeholder="e.g. 1234" TextMode="Password"></asp:TextBox><label id="RememberMe">记住我</label><asp:CheckBox ID="RememberMe" runat="server"/><asp:Button CssClass="button" ID="LoginButton" runat="server" CommandName="Login" Text="SUBMIT"/></fieldset></asp:面板></LayoutTemplate></asp:登录>
在浏览器中显示如下:
<div class="members-login" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton')"><字段集><label for="UserName">用户名</label><input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$username" type="text" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_username" placeholder="例如joebloggs12"/><label for="密码">密码</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">记住我</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>
我怀疑 ViewState 正在以某种方式窃取焦点.但我试过 event.stopPropogation()
没有帮助.
临时修复
现在我已经解决了一个hacky修复,在点击700毫秒后强制焦点回到<input>
元素上:
jQuery('input').bind('click',function(evt) {var focusClosure = (function(inputElem) {return function() {console.log(inputElem.focus());}}($(evt.target)));window.setTimeout(focusClosure, 700);});
我发现这与 ASP.net 或 ViewState 无关.
当 Android 键盘出现时,浏览器窗口被调整大小 - 触发 resize 事件.
我正在运行类似于以下内容:
//在调整大小时移动导航$(window).bind('resize', function() {如果(最大宽度 <= 710 像素){$('.nav').after($('.main-content'));}});
这移动了 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.
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屋!